merge fix

2023-08-10 15:15:39 -04:00
parent 22eecd2de6 3b49b5a880
commit bf4ff204f7
578 changed files with 6933 additions and 4940 deletions
--- a/app/javascript/flavours/glitch/actions/importer/index.js
+++ b/app/javascript/flavours/glitch/actions/importer/index.js
@ -81,7 +81,7 @@ export function importFetchedStatuses(statuses) {
      }

      if (status.poll && status.poll.id) {
-        pushUnique(polls, normalizePoll(status.poll));
+        pushUnique(polls, normalizePoll(status.poll, getState().getIn(['polls', status.poll.id])));
      }
    }

@ -95,7 +95,7 @@ export function importFetchedStatuses(statuses) {
 }

 export function importFetchedPoll(poll) {
-  return dispatch => {
-    dispatch(importPolls([normalizePoll(poll)]));
+  return (dispatch, getState) => {
+    dispatch(importPolls([normalizePoll(poll, getState().getIn(['polls', poll.id]))]));
  };
 }
--- a/app/javascript/flavours/glitch/actions/importer/normalizer.js
+++ b/app/javascript/flavours/glitch/actions/importer/normalizer.js
@ -75,6 +75,7 @@ export function normalizeStatus(status, normalOldStatus, settings) {
    normalStatus.contentHtml = normalOldStatus.get('contentHtml');
    normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
    normalStatus.hidden = normalOldStatus.get('hidden');
+    normalStatus.translation = normalOldStatus.get('translation');
  } 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');
@ -86,6 +87,18 @@ export function normalizeStatus(status, normalOldStatus, settings) {
    normalStatus.hidden       = (spoilerText.length > 0 || normalStatus.sensitive) && autoHideCW(settings, spoilerText);
  }

+  if (normalOldStatus) {
+    const list = normalOldStatus.get('media_attachments');
+    if (normalStatus.media_attachments && list) {
+      normalStatus.media_attachments.forEach(item => {
+        const oldItem = list.find(i => i.get('id') === item.id);
+        if (oldItem && oldItem.get('description') === item.description) {
+          item.translation = oldItem.get('translation')
+        }
+      });
+    }
+  }
+
  return normalStatus;
 }

@ -104,15 +117,23 @@ export function normalizeStatusTranslation(translation, status) {
  return normalTranslation;
 }

-export function normalizePoll(poll) {
+export function normalizePoll(poll, normalOldPoll) {
  const normalPoll = { ...poll };
  const emojiMap = makeEmojiMap(poll.emojis);

-  normalPoll.options = poll.options.map((option, index) => ({
-    ...option,
-    voted: poll.own_votes && poll.own_votes.includes(index),
-    titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
-  }));
+  normalPoll.options = poll.options.map((option, index) => {
+    const normalOption = {
+      ...option,
+      voted: poll.own_votes && poll.own_votes.includes(index),
+      titleHtml: emojify(escapeTextContentForBrowser(option.title), emojiMap),
+    }
+
+    if (normalOldPoll && normalOldPoll.getIn(['options', index, 'title']) === option.title) {
+      normalOption.translation = normalOldPoll.getIn(['options', index, 'translation']);
+    }
+
+    return normalOption
+  });

  return normalPoll;
 }
--- a/app/javascript/flavours/glitch/actions/search.js
+++ b/app/javascript/flavours/glitch/actions/search.js
@ -15,6 +15,9 @@ export const SEARCH_EXPAND_REQUEST = 'SEARCH_EXPAND_REQUEST';
 export const SEARCH_EXPAND_SUCCESS = 'SEARCH_EXPAND_SUCCESS';
 export const SEARCH_EXPAND_FAIL    = 'SEARCH_EXPAND_FAIL';

+export const SEARCH_RESULT_CLICK  = 'SEARCH_RESULT_CLICK';
+export const SEARCH_RESULT_FORGET = 'SEARCH_RESULT_FORGET';
+
 export function changeSearch(value) {
  return {
    type: SEARCH_CHANGE,
@ -28,7 +31,7 @@ export function clearSearch() {
  };
 }

-export function submitSearch() {
+export function submitSearch(type) {
  return (dispatch, getState) => {
    const value    = getState().getIn(['search', 'value']);
    const signedIn = !!getState().getIn(['meta', 'me']);
@ -45,6 +48,7 @@ export function submitSearch() {
        q: value,
        resolve: signedIn,
        limit: 10,
+        type,
      },
    }).then(response => {
      if (response.data.accounts) {
@ -131,3 +135,42 @@ export const expandSearchFail = error => ({
 export const showSearch = () => ({
  type: SEARCH_SHOW,
 });
+
+export const openURL = routerHistory => (dispatch, getState) => {
+  const value = getState().getIn(['search', 'value']);
+  const signedIn = !!getState().getIn(['meta', 'me']);
+
+  if (!signedIn) {
+    return;
+  }
+
+  dispatch(fetchSearchRequest());
+
+  api(getState).get('/api/v2/search', { params: { q: value, resolve: true } }).then(response => {
+    if (response.data.accounts?.length > 0) {
+      dispatch(importFetchedAccounts(response.data.accounts));
+      routerHistory.push(`/@${response.data.accounts[0].acct}`);
+    } else if (response.data.statuses?.length > 0) {
+      dispatch(importFetchedStatuses(response.data.statuses));
+      routerHistory.push(`/@${response.data.statuses[0].account.acct}/${response.data.statuses[0].id}`);
+    }
+
+    dispatch(fetchSearchSuccess(response.data, value));
+  }).catch(err => {
+    dispatch(fetchSearchFail(err));
+  });
+};
+
+export const clickSearchResult = (q, type) => ({
+  type: SEARCH_RESULT_CLICK,
+
+  result: {
+    type,
+    q,
+  },
+});
+
+export const forgetSearchResult = q => ({
+  type: SEARCH_RESULT_FORGET,
+  q,
+});
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@ -31,7 +31,7 @@ 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' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
  open: { id: 'status.open', defaultMessage: 'Expand this status' },
  report: { id: 'status.report', defaultMessage: 'Report @{name}' },
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@ -55,7 +55,7 @@ export default class StatusPrepend extends PureComponent {
      return (
        <FormattedMessage
          id='notification.favourite'
-          defaultMessage='{name} favourited your status'
+          defaultMessage='{name} favorited your status'
          values={{ name : link }}
        />
      );
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@ -47,7 +47,7 @@ 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?' },
  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.' },
+  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?' },
  editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
@ -293,7 +293,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
      modalProps: {
        type,
        accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
+        url: status.get('uri'),
      },
    }));
  },
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@ -46,7 +46,7 @@ const messages = defineMessages({
  pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
  followed_tags: { id: 'navigation_bar.followed_tags', defaultMessage: 'Followed hashtags' },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
--- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
@ -130,7 +130,11 @@ export default class MediaItem extends ImmutablePureComponent {
        <div className='media-gallery__gifv'>
          {content}

-          {label && <span className='media-gallery__gifv__label'>{label}</span>}
+          {label && (
+            <div className='media-gallery__item__badges'>
+              <span className='media-gallery__gifv__label'>{label}</span>
+            </div>
+          )}
        </div>
      );
    }
--- a/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/containers/header_container.jsx
@ -83,7 +83,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
      modalProps: {
        type: 'follow',
        accountId: account.get('id'),
-        url: account.get('url'),
+        url: account.get('uri'),
      },
    }));
  },
--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@ -477,6 +477,7 @@ class Audio extends PureComponent {
    const progress = Math.min((currentTime / duration) * 100, 100);

    let warning;
+
    if (sensitive) {
      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
    } else {
@ -522,7 +523,10 @@ class Audio extends PureComponent {

        <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
+            <span className='spoiler-button__overlay__label'>
+              {warning}
+              <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+            </span>
          </button>
        </div>

--- a/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/action_bar.jsx
@ -14,7 +14,7 @@ const messages = defineMessages({
  pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
  followed_tags: { id: 'navigation_bar.followed_tags', defaultMessage: 'Followed hashtags' },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@ -7,39 +7,21 @@ import {
  defineMessages,
 } from 'react-intl';

-import Overlay from 'react-overlays/Overlay';
+import classNames from 'classnames';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+

 import { Icon } from 'flavours/glitch/components/icon';
 import { searchEnabled } from 'flavours/glitch/initial_state';
 import { focusRoot } from 'flavours/glitch/utils/dom_helpers';
+import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';

 const messages = defineMessages({
  placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
  placeholderSignedIn: { id: 'search.search_or_paste', defaultMessage: 'Search or paste URL' },
 });

-class SearchPopout extends PureComponent {
-
-  render () {
-    const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
-    return (
-      <div className='search-popout'>
-        <h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
-
-        <ul>
-          <li><em>#example</em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' /></li>
-          <li><em>@username@domain</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
-          <li><em>URL</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
-          <li><em>URL</em> <FormattedMessage id='search_popout.tips.status' defaultMessage='status' /></li>
-        </ul>
-
-        {extraInformation}
-      </div>
-    );
-  }
-
-}
-
 //  The component.
 class Search extends PureComponent {

@ -50,9 +32,13 @@ class Search extends PureComponent {

  static propTypes = {
    value: PropTypes.string.isRequired,
+    recent: ImmutablePropTypes.orderedSet,
    submitted: PropTypes.bool,
    onChange: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
+    onOpenURL: PropTypes.func.isRequired,
+    onClickSearchResult: PropTypes.func.isRequired,
+    onForgetSearchResult: PropTypes.func.isRequired,
    onClear: PropTypes.func.isRequired,
    onShow: PropTypes.func.isRequired,
    openInRoute: PropTypes.bool,
@ -62,59 +48,104 @@ class Search extends PureComponent {

  state = {
    expanded: false,
+    selectedOption: -1,
+    options: [],
  };

  setRef = c => {
    this.searchForm = c;
  };

-  handleChange = (e) => {
+  handleChange = ({ target }) => {
    const { onChange } = this.props;
-    if (onChange) {
-      onChange(e.target.value);
-    }
+
+    onChange(target.value);
+
+    this._calculateOptions(target.value);
  };

-  handleClear = (e) => {
+  handleClear = e => {
    const {
      onClear,
      submitted,
      value,
    } = this.props;
+
    e.preventDefault();  //  Prevents focus change ??
-    if (onClear && (submitted || value && value.length)) {
+
+    if (value.length > 0 || submitted) {
      onClear();
+      this.setState({ options: [], selectedOption: -1 })
    }
  };

  handleBlur = () => {
-    this.setState({ expanded: false });
+    this.setState({ expanded: false, selectedOption: -1 });
  };

  handleFocus = () => {
-    this.setState({ expanded: true });
-    this.props.onShow();
+    const { onShow, singleColumn } = this.props;

-    if (this.searchForm && !this.props.singleColumn) {
+    this.setState({ expanded: true, selectedOption: -1 });
+    onShow();
+
+    if (this.searchForm && !singleColumn) {
      const { left, right } = this.searchForm.getBoundingClientRect();
+
      if (left < 0 || right > (window.innerWidth || document.documentElement.clientWidth)) {
        this.searchForm.scrollIntoView();
      }
    }
  };

-  handleKeyUp = (e) => {
-    const { onSubmit } = this.props;
-    switch (e.key) {
-    case 'Enter':
-      onSubmit();
+  handleKeyDown = (e) => {
+    const { selectedOption } = this.state;
+    const options = this._getOptions();

-      if (this.props.openInRoute) {
-        this.context.router.history.push('/search');
+    switch(e.key) {
+    case 'Escape':
+      e.preventDefault();
+
+      focusRoot();
+
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) });
+      }
+
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.max(selectedOption - 1, -1) });
+      }
+
+      break;
+    case 'Enter':
+      e.preventDefault();
+
+      if (selectedOption === -1) {
+        this._submit();
+      } else if (options.length > 0) {
+        options[selectedOption].action();
+      }
+
+      this._unfocus();
+      break;
+    case 'Delete':
+      if (selectedOption > -1 && options.length > 0) {
+        const search = options[selectedOption];
+
+        if (typeof search.forget === 'function') {
+          e.preventDefault();
+          search.forget(e);
+        }
      }
      break;
-    case 'Escape':
-      focusRoot();
    }
  };

@ -122,14 +153,141 @@ class Search extends PureComponent {
    return this.searchForm;
  };

+  handleHashtagClick = () => {
+    const { router } = this.context;
+    const { value, onClickSearchResult } = this.props;
+
+    const query = value.trim().replace(/^#/, '');
+
+    router.history.push(`/tags/${query}`);
+    onClickSearchResult(query, 'hashtag');
+  };
+
+  handleAccountClick = () => {
+    const { router } = this.context;
+    const { value, onClickSearchResult } = this.props;
+
+    const query = value.trim().replace(/^@/, '');
+
+    router.history.push(`/@${query}`);
+    onClickSearchResult(query, 'account');
+  };
+
+  handleURLClick = () => {
+    const { router } = this.context;
+    const { onOpenURL } = this.props;
+
+    onOpenURL(router.history);
+  };
+
+  handleStatusSearch = () => {
+    this._submit('statuses');
+  };
+
+  handleAccountSearch = () => {
+    this._submit('accounts');
+  };
+
+  handleRecentSearchClick = search => {
+    const { router } = this.context;
+
+    if (search.get('type') === 'account') {
+      router.history.push(`/@${search.get('q')}`);
+    } else if (search.get('type') === 'hashtag') {
+      router.history.push(`/tags/${search.get('q')}`);
+    }
+  };
+
+  handleForgetRecentSearchClick = search => {
+    const { onForgetSearchResult } = this.props;
+
+    onForgetSearchResult(search.get('q'));
+  };
+
+  _unfocus () {
+    document.querySelector('.ui').parentElement.focus();
+  }
+
+  _submit (type) {
+    const { onSubmit, openInRoute } = this.props;
+    const { router } = this.context;
+
+    onSubmit(type);
+
+    if (openInRoute) {
+      router.history.push('/search');
+    }
+  }
+
+  _getOptions () {
+    const { options } = this.state;
+
+    if (options.length > 0) {
+      return options;
+    }
+
+    const { recent } = this.props;
+
+    return recent.toArray().map(search => ({
+      label: search.get('type') === 'account' ? `@${search.get('q')}` : `#${search.get('q')}`,
+
+      action: () => this.handleRecentSearchClick(search),
+
+      forget: e => {
+        e.stopPropagation();
+        this.handleForgetRecentSearchClick(search);
+      },
+    }));
+  }
+
+  _calculateOptions (value) {
+    const trimmedValue = value.trim();
+    const options = [];
+
+    if (trimmedValue.length > 0) {
+      const couldBeURL = trimmedValue.startsWith('https://') && !trimmedValue.includes(' ');
+
+      if (couldBeURL) {
+        options.push({ key: 'open-url', label: <FormattedMessage id='search.quick_action.open_url' defaultMessage='Open URL in Mastodon' />, action: this.handleURLClick });
+      }
+
+      const couldBeHashtag = (trimmedValue.startsWith('#') && trimmedValue.length > 1) || trimmedValue.match(HASHTAG_REGEX);
+
+      if (couldBeHashtag) {
+        options.push({ key: 'go-to-hashtag', label: <FormattedMessage id='search.quick_action.go_to_hashtag' defaultMessage='Go to hashtag {x}' values={{ x: <mark>#{trimmedValue.replace(/^#/, '')}</mark> }} />, action: this.handleHashtagClick });
+      }
+
+      const couldBeUsername = trimmedValue.match(/^@?[a-z0-9_-]+(@[^\s]+)?$/i);
+
+      if (couldBeUsername) {
+        options.push({ key: 'go-to-account', label: <FormattedMessage id='search.quick_action.go_to_account' defaultMessage='Go to profile {x}' values={{ x: <mark>@{trimmedValue.replace(/^@/, '')}</mark> }} />, action: this.handleAccountClick });
+      }
+
+      const couldBeStatusSearch = searchEnabled;
+
+      if (couldBeStatusSearch) {
+        options.push({ key: 'status-search', label: <FormattedMessage id='search.quick_action.status_search' defaultMessage='Posts matching {x}' values={{ x: <mark>{trimmedValue}</mark> }} />, action: this.handleStatusSearch });
+      }
+
+      const couldBeUserSearch = true;
+
+      if (couldBeUserSearch) {
+        options.push({ key: 'account-search', label: <FormattedMessage id='search.quick_action.account_search' defaultMessage='Profiles matching {x}' values={{ x: <mark>{trimmedValue}</mark> }} />, action: this.handleAccountSearch });
+      }
+    }
+
+    this.setState({ options });
+  }
+
  render () {
-    const { intl, value, submitted } = this.props;
-    const { expanded } = this.state;
+    const { intl, value, submitted, recent } = this.props;
+    const { expanded, options, selectedOption } = this.state;
    const { signedIn } = this.context.identity;
+
    const hasValue = value.length > 0 || submitted;

    return (
-      <div className='search'>
+      <div className={classNames('search', { active: expanded })}>
        <input
          ref={this.setRef}
          className='search__input'
@ -138,7 +296,7 @@ class Search extends PureComponent {
          aria-label={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
          value={value || ''}
          onChange={this.handleChange}
-          onKeyUp={this.handleKeyUp}
+          onKeyDown={this.handleKeyDown}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        />
@ -147,15 +305,39 @@ class Search extends PureComponent {
          <Icon id='search' className={hasValue ? '' : 'active'} />
          <Icon id='times-circle' className={hasValue ? 'active' : ''} />
        </div>
-        <Overlay show={expanded && !hasValue} placement='bottom' target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
-          {({ props, placement }) => (
-            <div {...props} style={{ ...props.style, width: 285, zIndex: 2 }}>
-              <div className={`dropdown-animation ${placement}`}>
-                <SearchPopout />
+        <div className='search__popout'>
+          {options.length === 0 && (
+            <>
+              <h4><FormattedMessage id='search_popout.recent' defaultMessage='Recent searches' /></h4>
+
+              <div className='search__popout__menu'>
+                {recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => (
+                  <button key={label} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
+                    <span>{label}</span>
+                    <button className='icon-button' onMouseDown={forget}><Icon id='times' /></button>
+                  </button>
+                )) : (
+                  <div className='search__popout__menu__message'>
+                    <FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' />
+                  </div>
+                )}
              </div>
-            </div>
+            </>
          )}
-        </Overlay>
+          {options.length > 0 && (
+            <>
+              <h4><FormattedMessage id='search_popout.quick_actions' defaultMessage='Quick actions' /></h4>
+
+              <div className='search__popout__menu'>
+                {options.map(({ key, label, action }, i) => (
+                  <button key={key} onMouseDown={action} className={classNames('search__popout__menu__item', { selected: selectedOption === i })}>
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
      </div>
    );
  }
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
@ -89,7 +89,7 @@ class SearchResults extends ImmutablePureComponent {
      count   += results.get('accounts').size;
      accounts = (
        <section className='search-results__section'>
-          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
+          <h5><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></h5>

          {results.get('accounts').map(accountId => <AccountContainer id={accountId} key={accountId} />)}

--- a/app/javascript/flavours/glitch/features/compose/containers/search_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/search_container.js
@ -5,6 +5,9 @@ import {
  clearSearch,
  submitSearch,
  showSearch,
+  openURL,
+  clickSearchResult,
+  forgetSearchResult,
 } from 'flavours/glitch/actions/search';

 import Search from '../components/search';
@ -12,6 +15,7 @@ import Search from '../components/search';
 const mapStateToProps = state => ({
  value: state.getIn(['search', 'value']),
  submitted: state.getIn(['search', 'submitted']),
+  recent: state.getIn(['search', 'recent']),
 });

 const mapDispatchToProps = dispatch => ({
@ -24,14 +28,26 @@ const mapDispatchToProps = dispatch => ({
    dispatch(clearSearch());
  },

-  onSubmit () {
-    dispatch(submitSearch());
+  onSubmit (type) {
+    dispatch(submitSearch(type));
  },

  onShow () {
    dispatch(showSearch());
  },

+  onOpenURL (routerHistory) {
+    dispatch(openURL(routerHistory));
+  },
+
+  onClickSearchResult (q, type) {
+    dispatch(clickSearchResult(q, type));
+  },
+
+  onForgetSearchResult (q) {
+    dispatch(forgetSearchResult(q));
+  },
+
 });

 export default connect(mapStateToProps, mapDispatchToProps)(Search);
--- a/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
+++ b/app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
@ -6,37 +6,14 @@ import { connect } from 'react-redux';

 import { me } from 'flavours/glitch/initial_state';
 import { profileLink, privacyPolicyLink } from 'flavours/glitch/utils/backend_links';
+import { HASHTAG_PATTERN_REGEX } from 'flavours/glitch/utils/hashtags';

 import Warning from '../components/warning';

-const buildHashtagRE = () => {
-  try {
-    const HASHTAG_SEPARATORS = '_\\u00b7\\u200c';
-    const ALPHA = '\\p{L}\\p{M}';
-    const WORD = '\\p{L}\\p{M}\\p{N}\\p{Pc}';
-    return new RegExp(
-      '(?:^|[^\\/\\)\\w])#((' +
-      '[' + WORD + '_]' +
-      '[' + WORD + HASHTAG_SEPARATORS + ']*' +
-      '[' + ALPHA + HASHTAG_SEPARATORS + ']' +
-      '[' + WORD + HASHTAG_SEPARATORS +']*' +
-      '[' + WORD + '_]' +
-      ')|(' +
-      '[' + WORD + '_]*' +
-      '[' + ALPHA + ']' +
-      '[' + WORD + '_]*' +
-      '))', 'iu',
-    );
-  } catch {
-    return /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i;
-  }
-};
-
-const APPROX_HASHTAG_RE = buildHashtagRE();

 const mapStateToProps = state => ({
  needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', me, 'locked']),
-  hashtagWarning: state.getIn(['compose', 'privacy']) !== 'public' && APPROX_HASHTAG_RE.test(state.getIn(['compose', 'text'])),
+  hashtagWarning: state.getIn(['compose', 'privacy']) !== 'public' && HASHTAG_PATTERN_REGEX.test(state.getIn(['compose', 'text'])),
  directMessageWarning: state.getIn(['compose', 'privacy']) === 'direct',
 });

--- a/app/javascript/flavours/glitch/features/explore/components/story.jsx
+++ b/app/javascript/flavours/glitch/features/explore/components/story.jsx
@ -1,10 +1,13 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';

+import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';

 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { ShortNumber } from 'flavours/glitch/components/short_number';
 import { Skeleton } from 'flavours/glitch/components/skeleton';

@ -14,10 +17,14 @@ export default class Story extends PureComponent {
  static propTypes = {
    url: PropTypes.string,
    title: PropTypes.string,
+    lang: PropTypes.string,
    publisher: PropTypes.string,
+    publishedAt: PropTypes.string,
+    author: PropTypes.string,
    sharedTimes: PropTypes.number,
    thumbnail: PropTypes.string,
    blurhash: PropTypes.string,
+    expanded: PropTypes.bool,
  };

  state = {
@ -27,16 +34,16 @@ export default class Story extends PureComponent {
  handleImageLoad = () => this.setState({ thumbnailLoaded: true });

  render () {
-    const { url, title, publisher, sharedTimes, thumbnail, blurhash } = this.props;
+    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, blurhash } = this.props;

    const { thumbnailLoaded } = this.state;

    return (
-      <a className='story' href={url} target='blank' rel='noopener'>
+      <a className={classNames('story', { expanded })} href={url} target='blank' rel='noopener'>
        <div className='story__details'>
-          <div className='story__details__publisher'>{publisher ? publisher : <Skeleton width={50} />}</div>
-          <div className='story__details__title'>{title ? title : <Skeleton />}</div>
-          <div className='story__details__shared'>{typeof sharedTimes === 'number' ? <ShortNumber value={sharedTimes} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}</div>
+          <div className='story__details__publisher'>{publisher ? <span lang={lang}>{publisher}</span> : <Skeleton width={50} />}{publishedAt && <> · <RelativeTimestamp timestamp={publishedAt} /></>}</div>
+          <div className='story__details__title' lang={lang}>{title ? title : <Skeleton />}</div>
+          <div className='story__details__shared'>{author && <><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{author}</strong> }} /> · </>}{typeof sharedTimes === 'number' ? <ShortNumber value={sharedTimes} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}</div>
        </div>

        <div className='story__thumbnail'>
--- a/app/javascript/flavours/glitch/features/explore/links.jsx
+++ b/app/javascript/flavours/glitch/features/explore/links.jsx
@ -55,12 +55,16 @@ class Links extends PureComponent {
      <div className='explore__links'>
        {banner}

-        {isLoading ? (<LoadingIndicator />) : links.map(link => (
+        {isLoading ? (<LoadingIndicator />) : links.map((link, i) => (
          <Story
            key={link.get('id')}
+            expanded={i === 0}
+            lang={link.get('language')}
            url={link.get('url')}
            title={link.get('title')}
            publisher={link.get('provider_name')}
+            publishedAt={link.get('published_at')}
+            author={link.get('author_name')}
            sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
            thumbnail={link.get('image')}
            blurhash={link.get('blurhash')}
--- a/app/javascript/flavours/glitch/features/explore/results.jsx
+++ b/app/javascript/flavours/glitch/features/explore/results.jsx
@ -111,7 +111,7 @@ class Results extends PureComponent {
      <>
        <div className='account__section-headline'>
          <button onClick={this.handleSelectAll} className={type === 'all' && 'active'}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
-          <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='People' /></button>
+          <button onClick={this.handleSelectAccounts} className={type === 'accounts' && 'active'}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' && 'active'}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
          <button onClick={this.handleSelectStatuses} className={type === 'statuses' && 'active'}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
        </div>
--- a/app/javascript/flavours/glitch/features/explore/statuses.jsx
+++ b/app/javascript/flavours/glitch/features/explore/statuses.jsx
@ -47,7 +47,7 @@ class Statuses extends PureComponent {
    return (
      <>
        <DismissableBanner id='explore/statuses'>
-          <FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These are posts from across the social web that are gaining traction today. Newer posts with more boosts and favourites are ranked higher.' />
+          <FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These are posts from across the social web that are gaining traction today. Newer posts with more boosts and favorites are ranked higher.' />
        </DismissableBanner>

        <StatusList
--- a/app/javascript/flavours/glitch/features/favourited_statuses/index.jsx
+++ b/app/javascript/flavours/glitch/features/favourited_statuses/index.jsx
@ -18,7 +18,7 @@ import Column from 'flavours/glitch/features/ui/components/column';
 import { getStatusList } from 'flavours/glitch/selectors';

 const messages = defineMessages({
-  heading: { id: 'column.favourites', defaultMessage: 'Favourites' },
+  heading: { id: 'column.favourites', defaultMessage: 'Favorites' },
 });

 const mapStateToProps = state => ({
@ -74,7 +74,7 @@ class Favourites extends ImmutablePureComponent {
    const { intl, statusIds, columnId, multiColumn, hasMore, isLoading } = this.props;
    const pinned = !!columnId;

-    const emptyMessage = <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any favourite posts yet. When you favourite one, it will show up here." />;
+    const emptyMessage = <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any favorite posts yet. When you favorite one, it will show up here." />;

    return (
      <Column bindToDocument={!multiColumn} ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}>
--- a/app/javascript/flavours/glitch/features/favourites/index.jsx
+++ b/app/javascript/flavours/glitch/features/favourites/index.jsx
@ -71,7 +71,7 @@ class Favourites extends ImmutablePureComponent {
      );
    }

-    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has favourited this post yet. When someone does, they will show up here.' />;
+    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has favorited this post yet. When someone does, they will show up here.' />;

    return (
      <Column ref={this.setRef}>
--- a/app/javascript/flavours/glitch/features/firehose/index.jsx
+++ b/app/javascript/flavours/glitch/features/firehose/index.jsx
@ -76,12 +76,12 @@ const Firehose = ({ feedType, multiColumn }) => {
  const { signedIn } = useIdentity();
  const columnRef = useRef(null);

-  const onlyMedia = useAppSelector((state) => state.getIn(['settings', 'firehose', 'onlyMedia'], false));
-  const hasUnread = useAppSelector((state) => state.getIn(['timelines', `${feedType}${onlyMedia ? ':media' : ''}`, 'unread'], 0) > 0);
-
  const allowLocalOnly = useAppSelector((state) => state.getIn(['settings', 'firehose', 'allowLocalOnly']));
  const regex = useAppSelector((state) => state.getIn(['settings', 'firehose', 'regex', 'body']));

+  const onlyMedia = useAppSelector((state) => state.getIn(['settings', 'firehose', 'onlyMedia'], false));
+  const hasUnread = useAppSelector((state) => state.getIn(['timelines', `${feedType}${feedType === 'public' && allowLocalOnly ? ':allow_local_only' : ''}${onlyMedia ? ':media' : ''}`, 'unread'], 0) > 0);
+
  const handlePin = useCallback(
    () => {
      switch(feedType) {
--- a/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx
@ -15,7 +15,7 @@ import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subh
 const messages = defineMessages({
  heading: { id: 'column.heading', defaultMessage: 'Misc' },
  subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
--- a/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/components/explore_prompt.tsx
@ -22,7 +22,7 @@ export const ExplorePrompt = () => (
    <p>
      <FormattedMessage
        id='home.explore_prompt.body'
-        defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. It's looking pretty quiet right now, so how about:"
+        defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. If that feels too quiet, you may want to:"
      />
    </p>

--- a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
@ -1,95 +1,296 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import React from 'react';

-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';

 import classNames from 'classnames';

 import { connect } from 'react-redux';

+import { throttle, escapeRegExp } from 'lodash';
+
 import { openModal, closeModal } from 'flavours/glitch/actions/modal';
+import api from 'flavours/glitch/api';
+import Button from 'flavours/glitch/components/button';
 import { Icon } from 'flavours/glitch/components/icon';
 import { registrationsOpen } from 'flavours/glitch/initial_state';

+const messages = defineMessages({
+  loginPrompt: { id: 'interaction_modal.login.prompt', defaultMessage: 'Domain of your home server, e.g. mastodon.social' },
+});
+
 const mapStateToProps = (state, { accountId }) => ({
  displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
-  signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
 });

 const mapDispatchToProps = (dispatch) => ({
  onSignupClick() {
-    dispatch(closeModal({
-      modalType: undefined,
-      ignoreFocus: false,
-    }));
-    dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
+    dispatch(closeModal());
+    dispatch(openModal('CLOSED_REGISTRATIONS'));
  },
 });

-class Copypaste extends PureComponent {
+const PERSISTENCE_KEY = 'flavours/glitch_home';
+
+const isValidDomain = value => {
+  const url = new URL('https:///path');
+  url.hostname = value;
+  return url.hostname === value;
+};
+
+const valueToDomain = value => {
+  // If the user starts typing an URL
+  if (/^https?:\/\//.test(value)) {
+    try {
+      const url = new URL(value);
+
+      // Consider that if there is a path, the URL is more meaningful than a bare domain
+      if (url.pathname.length > 1) {
+        return '';
+      }
+
+      return url.host;
+    } catch {
+      return undefined;
+    }
+  // If the user writes their full handle including username
+  } else if (value.includes('@')) {
+    if (value.replace(/^@/, '').split('@').length > 2) {
+      return undefined;
+    }
+    return '';
+  }
+
+  return value;
+};
+
+const addInputToOptions = (value, options) => {
+  value = value.trim();
+
+  if (value.includes('.') && isValidDomain(value)) {
+    return [value].concat(options.filter((x) => x !== value));
+  }
+
+  return options;
+};
+
+class LoginForm extends React.PureComponent {

  static propTypes = {
-    value: PropTypes.string,
+    resourceUrl: PropTypes.string,
+    intl: PropTypes.object.isRequired,
  };

  state = {
-    copied: false,
+    value: localStorage ? (localStorage.getItem(PERSISTENCE_KEY) || '') : '',
+    expanded: false,
+    selectedOption: -1,
+    isLoading: false,
+    isSubmitting: false,
+    error: false,
+    options: [],
+    networkOptions: [],
  };

  setRef = c => {
    this.input = c;
  };

-  handleInputClick = () => {
-    this.setState({ copied: false });
-    this.input.focus();
-    this.input.select();
-    this.input.setSelectionRange(0, this.input.value.length);
+  handleChange = ({ target }) => {
+    this.setState(state => ({ value: target.value, isLoading: true, error: false, options: addInputToOptions(target.value, state.networkOptions) }), () => this._loadOptions());
  };

-  handleButtonClick = () => {
-    const { value } = this.props;
-    navigator.clipboard.writeText(value);
-    this.input.blur();
-    this.setState({ copied: true });
-    this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
+  handleMessage = (event) => {
+    const { resourceUrl } = this.props;
+
+    if (event.origin !== window.origin || event.source !== this.iframeRef.contentWindow) {
+      return;
+    }
+
+    if (event.data?.type === 'fetchInteractionURL-failure') {
+      this.setState({ isSubmitting: false, error: true });
+    } else if (event.data?.type === 'fetchInteractionURL-success') {
+      if (/^https?:\/\//.test(event.data.template)) {
+        if (localStorage) {
+          localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
+        }
+
+        window.location.href = event.data.template.replace('{uri}', encodeURIComponent(resourceUrl));
+      } else {
+        this.setState({ isSubmitting: false, error: true });
+      }
+    }
  };

-  componentWillUnmount () {
-    if (this.timeout) clearTimeout(this.timeout);
+  componentDidMount () {
+    window.addEventListener('message', this.handleMessage);
  }

+  componentWillUnmount () {
+    window.removeEventListener('message', this.handleMessage);
+  }
+
+  handleSubmit = () => {
+    const { value } = this.state;
+
+    this.setState({ isSubmitting: true });
+
+    this.iframeRef.contentWindow.postMessage({
+      type: 'fetchInteractionURL',
+      uri_or_domain: value.trim(),
+    }, window.origin);
+  };
+
+  setIFrameRef = (iframe) => {
+    this.iframeRef = iframe;
+  }
+
+  handleFocus = () => {
+    this.setState({ expanded: true });
+  };
+
+  handleBlur = () => {
+    this.setState({ expanded: false });
+  };
+
+  handleKeyDown = (e) => {
+    const { options, selectedOption } = this.state;
+
+    switch(e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) });
+      }
+
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+
+      if (options.length > 0) {
+        this.setState({ selectedOption: Math.max(selectedOption - 1, -1) });
+      }
+
+      break;
+    case 'Enter':
+      e.preventDefault();
+
+      if (selectedOption === -1) {
+        this.handleSubmit();
+      } else if (options.length > 0) {
+        this.setState({ value: options[selectedOption], error: false }, () => this.handleSubmit());
+      }
+
+      break;
+    }
+  };
+
+  handleOptionClick = e => {
+    const index  = Number(e.currentTarget.getAttribute('data-index'));
+    const option = this.state.options[index];
+
+    e.preventDefault();
+    this.setState({ selectedOption: index, value: option, error: false }, () => this.handleSubmit());
+  };
+
+  _loadOptions = throttle(() => {
+    const { value } = this.state;
+
+    const domain = valueToDomain(value.trim());
+
+    if (typeof domain === 'undefined') {
+      this.setState({ options: [], networkOptions: [], isLoading: false, error: true });
+      return;
+    }
+
+    if (domain.length === 0) {
+      this.setState({ options: [], networkOptions: [], isLoading: false });
+      return;
+    }
+
+    api().get('/api/v1/peers/search', { params: { q: domain } }).then(({ data }) => {
+      if (!data) {
+        data = [];
+      }
+
+      this.setState((state) => ({ networkOptions: data, options: addInputToOptions(state.value, data), isLoading: false }));
+    }).catch(() => {
+      this.setState({ isLoading: false });
+    });
+  }, 200, { leading: true, trailing: true });
+
  render () {
-    const { value } = this.props;
-    const { copied } = this.state;
+    const { intl } = this.props;
+    const { value, expanded, options, selectedOption, error, isSubmitting } = this.state;
+    const domain = (valueToDomain(value) || '').trim();
+    const domainRegExp = new RegExp(`(${escapeRegExp(domain)})`, 'gi');
+    const hasPopOut = domain.length > 0 && options.length > 0;

    return (
-      <div className={classNames('copypaste', { copied })}>
-        <input
-          type='text'
-          ref={this.setRef}
-          value={value}
-          readOnly
-          onClick={this.handleInputClick}
+      <div className={classNames('interaction-modal__login', { focused: expanded, expanded: hasPopOut, invalid: error })}>
+
+        <iframe
+          ref={this.setIFrameRef}
+          style={{display: 'none'}}
+          src='/remote_interaction_helper'
+          sandbox='allow-scripts allow-same-origin'
+          title='remote interaction helper'
        />

-        <button className='button' onClick={this.handleButtonClick}>
-          {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy' defaultMessage='Copy' />}
-        </button>
+        <div className='interaction-modal__login__input'>
+          <input
+            ref={this.setRef}
+            type='text'
+            value={value}
+            placeholder={intl.formatMessage(messages.loginPrompt)}
+            aria-label={intl.formatMessage(messages.loginPrompt)}
+            autoFocus
+            onChange={this.handleChange}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onKeyDown={this.handleKeyDown}
+          />
+
+          <Button onClick={this.handleSubmit} disabled={isSubmitting}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
+        </div>
+
+        {hasPopOut && (
+          <div className='search__popout'>
+            <div className='search__popout__menu'>
+              {options.map((option, i) => (
+                <button key={option} onMouseDown={this.handleOptionClick} data-index={i} className={classNames('search__popout__menu__item', { selected: selectedOption === i })}>
+                  {option.split(domainRegExp).map((part, i) => (
+                    part.toLowerCase() === domain.toLowerCase() ? (
+                      <mark key={i}>
+                        {part}
+                      </mark>
+                    ) : (
+                      <span key={i}>
+                        {part}
+                      </span>
+                    )
+                  ))}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
      </div>
    );
  }

 }

-class InteractionModal extends PureComponent {
+const IntlLoginForm = injectIntl(LoginForm);
+
+class InteractionModal extends React.PureComponent {

  static propTypes = {
    displayNameHtml: PropTypes.string,
    url: PropTypes.string,
    type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow']),
    onSignupClick: PropTypes.func.isRequired,
-    signupUrl: PropTypes.string.isRequired,
  };

  handleSignupClick = () => {
@ -97,7 +298,7 @@ class InteractionModal extends PureComponent {
  };

  render () {
-    const { url, type, displayNameHtml, signupUrl } = this.props;
+    const { url, type, displayNameHtml } = this.props;

    const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;

@ -116,8 +317,8 @@ class InteractionModal extends PureComponent {
      break;
    case 'favourite':
      icon = <Icon id='star' />;
-      title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favourite {name}'s post" values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favourite this post to let the author know you appreciate it and save it for later.' />;
+      title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favorite {name}'s post" values={{ name }} />;
+      actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favorite this post to let the author know you appreciate it and save it for later.' />;
      break;
    case 'follow':
      icon = <Icon id='user-plus' />;
@ -130,13 +331,13 @@ class InteractionModal extends PureComponent {

    if (registrationsOpen) {
      signupButton = (
-        <a href={signupUrl} className='button button--block button-tertiary'>
+        <a href='/auth/sign_up' className='link-button'>
          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
        </a>
      );
    } else {
      signupButton = (
-        <button className='button button--block button-tertiary' onClick={this.handleSignupClick}>
+        <button className='link-button' onClick={this.handleSignupClick}>
          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
        </button>
      );
@ -146,22 +347,13 @@ class InteractionModal extends PureComponent {
      <div className='modal-root__modal interaction-modal'>
        <div className='interaction-modal__lead'>
          <h3><span className='interaction-modal__icon'>{icon}</span> {title}</h3>
-          <p>{actionDescription} <FormattedMessage id='interaction_modal.preamble' defaultMessage="Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one." /></p>
+          <p>{actionDescription} <strong><FormattedMessage id='interaction_modal.sign_in' defaultMessage='You are not logged in to this server. Where is your account hosted?' /></strong></p>
        </div>

-        <div className='interaction-modal__choices'>
-          <div className='interaction-modal__choices__choice'>
-            <h3><FormattedMessage id='interaction_modal.on_this_server' defaultMessage='On this server' /></h3>
-            <a href='/auth/sign_in' className='button button--block'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
-            {signupButton}
-          </div>
+        <IntlLoginForm resourceUrl={url} />

-          <div className='interaction-modal__choices__choice'>
-            <h3><FormattedMessage id='interaction_modal.on_another_server' defaultMessage='On a different server' /></h3>
-            <p><FormattedMessage id='interaction_modal.other_server_instructions' defaultMessage='Copy and paste this URL into the search field of your favourite Mastodon app or the web interface of your Mastodon server.' /></p>
-            <Copypaste value={url} />
-          </div>
-        </div>
+        <p className='hint'><FormattedMessage id='interaction_modal.sign_in_hint' defaultMessage="Tip: That's the website where you signed up. If you don't remember, look for the welcome e-mail in your inbox. You can also enter your full username! (e.g. @Mastodon@mastodon.social)" /></p>
+        <p><FormattedMessage id='interaction_modal.no_account_yet' defaultMessage='Not on Mastodon?' /> {signupButton}</p>
      </div>
    );
  }
--- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx
+++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx
@ -61,7 +61,7 @@ class KeyboardShortcuts extends ImmutablePureComponent {
              </tr>
              <tr>
                <td><kbd>f</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favourite' /></td>
+                <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favorite' /></td>
              </tr>
              <tr>
                <td><kbd>b</kbd></td>
--- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx
@ -110,7 +110,7 @@ export default class ColumnSettings extends PureComponent {
        </div>

        <div role='group' aria-labelledby='notifications-favourite'>
-          <span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
+          <span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favorites:' /></span>

          <div className='column-settings__pillbar'>
            <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
@ -7,7 +7,7 @@ import { Icon } from 'flavours/glitch/components/icon';

 const tooltips = defineMessages({
  mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
-  favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
+  favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },
  boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
  polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
  follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
@ -23,7 +23,7 @@ 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' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  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?' },
  open: { id: 'status.open', defaultMessage: 'Expand this status' },
@ -93,7 +93,7 @@ class Footer extends ImmutablePureComponent {
        modalProps: {
          type: 'reply',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
@ -115,7 +115,7 @@ class Footer extends ImmutablePureComponent {
        modalProps: {
          type: 'favourite',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
@ -144,7 +144,7 @@ class Footer extends ImmutablePureComponent {
        modalProps: {
          type: 'reblog',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
--- a/app/javascript/flavours/glitch/features/public_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/public_timeline/index.jsx
@ -30,7 +30,7 @@ const mapStateToProps = (state, { columnId }) => {
  const onlyRemote = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'onlyRemote']) : state.getIn(['settings', 'public', 'other', 'onlyRemote']);
  const allowLocalOnly = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'other', 'allowLocalOnly']) : state.getIn(['settings', 'public', 'other', 'allowLocalOnly']);
  const regex = (columnId && index >= 0) ? columns.get(index).getIn(['params', 'regex', 'body']) : state.getIn(['settings', 'public', 'regex', 'body']);
-  const timelineState = state.getIn(['timelines', `public${onlyMedia ? ':media' : ''}`]);
+  const timelineState = state.getIn(['timelines', `public${onlyRemote ? ':remote' : allowLocalOnly ? ':allow_local_only' : ''}${onlyMedia ? ':media' : ''}`]);

  return {
    hasUnread: !!timelineState && timelineState.get('unread') > 0,
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@ -24,7 +24,7 @@ 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' },
-  favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
  bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
  more: { id: 'status.more', defaultMessage: 'More' },
  mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@ -181,7 +181,10 @@ export default class Card extends PureComponent {
    let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
    let spoilerButton = (
      <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
-        <span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+        <span className='spoiler-button__overlay__label'>
+          <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
+          <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+        </span>
      </button>
    );
    spoilerButton = (
--- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
+++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
@ -35,7 +35,7 @@ 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?' },
  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.' },
+  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?' },
 });
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@ -66,7 +66,7 @@ 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?' },
  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.' },
+  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.' },
  revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
  hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
  statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
@ -192,8 +192,8 @@ class Status extends ImmutablePureComponent {
    status: ImmutablePropTypes.map,
    isLoading: PropTypes.bool,
    settings: ImmutablePropTypes.map.isRequired,
-    ancestorsIds: ImmutablePropTypes.list,
-    descendantsIds: ImmutablePropTypes.list,
+    ancestorsIds: ImmutablePropTypes.list.isRequired,
+    descendantsIds: ImmutablePropTypes.list.isRequired,
    intl: PropTypes.object.isRequired,
    askReplyConfirmation: PropTypes.bool,
    multiColumn: PropTypes.bool,
@ -217,16 +217,6 @@ class Status extends ImmutablePureComponent {
  componentDidMount () {
    attachFullscreenListener(this.onFullScreenChange);
    this.props.dispatch(fetchStatus(this.props.params.statusId));
-
-    const { status, ancestorsIds } = this.props;
-
-    if (status && ancestorsIds && ancestorsIds.size > 0) {
-      const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
-
-      window.requestAnimationFrame(() => {
-        element.scrollIntoView(true);
-      });
-    }
  }

  static getDerivedStateFromProps(props, state) {
@ -305,7 +295,7 @@ class Status extends ImmutablePureComponent {
        modalProps: {
          type: 'favourite',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
@ -343,7 +333,7 @@ class Status extends ImmutablePureComponent {
        modalProps: {
          type: 'reply',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
@ -377,7 +367,7 @@ class Status extends ImmutablePureComponent {
        modalProps: {
          type: 'reblog',
          accountId: status.getIn(['account', 'id']),
-          url: status.get('url'),
+          url: status.get('uri'),
        },
      }));
    }
@ -625,16 +615,22 @@ class Status extends ImmutablePureComponent {
  };

  componentDidUpdate (prevProps) {
-    if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) {
-      const { status, ancestorsIds } = this.props;
+    const { status, ancestorsIds, multiColumn } = this.props;

-      if (status && ancestorsIds && ancestorsIds.size > 0) {
-        const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
+    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
+      window.requestAnimationFrame(() => {
+        this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);

-        window.requestAnimationFrame(() => {
-          element.scrollIntoView(true);
-        });
-      }
+        // In the single-column interface, `scrollIntoView` will put the post behind the header,
+        // so compensate for that.
+        if (!multiColumn) {
+          const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
+          if (offset) {
+            const scrollingElement = document.scrollingElement || document.body;
+            scrollingElement.scrollBy(0, -offset);
+          }
+        }
+      });
    }
  }

@ -701,16 +697,16 @@ class Status extends ImmutablePureComponent {
          showBackButton
          multiColumn={multiColumn}
          extraButton={(
-            <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
+            <button type='button' className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
          )}
        />

        <ScrollContainer scrollKey='thread'>
-          <div className={classNames('scrollable', 'detailed-status__wrapper', { fullscreen })} ref={this.setRef}>
+          <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
            {ancestors}

            <HotKeys handlers={handlers}>
-              <div className='focusable' tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
+              <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
                <DetailedStatus
                  key={`details-${status.get('id')}`}
                  status={status}
--- a/app/javascript/flavours/glitch/features/status/index.jsx.orig
+++ b/app/javascript/flavours/glitch/features/status/index.jsx.orig
@ -0,0 +1,761 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import classNames from 'classnames';
+import { Helmet } from 'react-helmet';
+
+import Immutable from 'immutable';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+
+import { HotKeys } from 'react-hotkeys';
+
+import { initBlockModal } from 'flavours/glitch/actions/blocks';
+import { initBoostModal } from 'flavours/glitch/actions/boosts';
+import {
+  replyCompose,
+  mentionCompose,
+  directCompose,
+} from 'flavours/glitch/actions/compose';
+import {
+  favourite,
+  unfavourite,
+  bookmark,
+  unbookmark,
+  reblog,
+  unreblog,
+  pin,
+  unpin,
+} from 'flavours/glitch/actions/interactions';
+import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
+import { openModal } from 'flavours/glitch/actions/modal';
+import { initMuteModal } from 'flavours/glitch/actions/mutes';
+import { initReport } from 'flavours/glitch/actions/reports';
+import {
+  fetchStatus,
+  muteStatus,
+  unmuteStatus,
+  deleteStatus,
+  editStatus,
+  hideStatus,
+  revealStatus,
+  translateStatus,
+  undoStatusTranslation,
+} from 'flavours/glitch/actions/statuses';
+import { Icon } from 'flavours/glitch/components/icon';
+import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
+import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
+import ScrollContainer from 'flavours/glitch/containers/scroll_container';
+import StatusContainer from 'flavours/glitch/containers/status_container';
+import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
+import Column from 'flavours/glitch/features/ui/components/column';
+import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
+import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
+import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
+
+import ColumnHeader from '../../components/column_header';
+import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
+
+import ActionBar from './components/action_bar';
+import DetailedStatus from './components/detailed_status';
+
+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?' },
+  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? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
+  revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
+  hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
+  statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
+  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?' },
+  tootHeading: { id: 'account.posts_with_replies', defaultMessage: 'Posts and replies' },
+});
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+  const getPictureInPicture = makeGetPictureInPicture();
+
+  const getAncestorsIds = createSelector([
+    (_, { id }) => id,
+    state => state.getIn(['contexts', 'inReplyTos']),
+  ], (statusId, inReplyTos) => {
+    let ancestorsIds = Immutable.List();
+    ancestorsIds = ancestorsIds.withMutations(mutable => {
+      let id = statusId;
+
+      while (id && !mutable.includes(id)) {
+        mutable.unshift(id);
+        id = inReplyTos.get(id);
+      }
+    });
+
+    return ancestorsIds;
+  });
+
+  const getDescendantsIds = createSelector([
+    (_, { id }) => id,
+    state => state.getIn(['contexts', 'replies']),
+    state => state.get('statuses'),
+  ], (statusId, contextReplies, statuses) => {
+    let descendantsIds = [];
+    const ids = [statusId];
+
+    while (ids.length > 0) {
+      let id        = ids.pop();
+      const replies = contextReplies.get(id);
+
+      if (statusId !== id) {
+        descendantsIds.push(id);
+      }
+
+      if (replies) {
+        replies.reverse().forEach(reply => {
+          if (!ids.includes(reply) && !descendantsIds.includes(reply) && statusId !== reply) ids.push(reply);
+        });
+      }
+    }
+
+    let insertAt = descendantsIds.findIndex((id) => statuses.get(id).get('in_reply_to_account_id') !== statuses.get(id).get('account'));
+    if (insertAt !== -1) {
+      descendantsIds.forEach((id, idx) => {
+        if (idx > insertAt && statuses.get(id).get('in_reply_to_account_id') === statuses.get(id).get('account')) {
+          descendantsIds.splice(idx, 1);
+          descendantsIds.splice(insertAt, 0, id);
+          insertAt += 1;
+        }
+      });
+    }
+
+    return Immutable.List(descendantsIds);
+  });
+
+  const mapStateToProps = (state, props) => {
+    const status = getStatus(state, { id: props.params.statusId });
+
+    let ancestorsIds   = Immutable.List();
+    let descendantsIds = Immutable.List();
+
+    if (status) {
+      ancestorsIds   = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
+      descendantsIds = getDescendantsIds(state, { id: status.get('id') });
+    }
+
+    return {
+      isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
+      status,
+      ancestorsIds,
+      descendantsIds,
+      settings: state.get('local_settings'),
+      askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
+      domain: state.getIn(['meta', 'domain']),
+      pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const truncate = (str, num) => {
+  const arr = Array.from(str);
+  if (arr.length > num) {
+    return arr.slice(0, num).join('') + '…';
+  } else {
+    return str;
+  }
+};
+
+const titleFromStatus = (intl, status) => {
+  const displayName = status.getIn(['account', 'display_name']);
+  const username = status.getIn(['account', 'username']);
+  const user = displayName.trim().length === 0 ? username : displayName;
+  const text = status.get('search_index');
+  const attachmentCount = status.get('media_attachments').size;
+
+  return text ? `${user}: "${truncate(text, 30)}"` : intl.formatMessage(messages.statusTitleWithAttachments, { user, attachmentCount });
+};
+
+class Status extends ImmutablePureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+    identity: PropTypes.object,
+  };
+
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map,
+    isLoading: PropTypes.bool,
+    settings: ImmutablePropTypes.map.isRequired,
+    ancestorsIds: ImmutablePropTypes.list.isRequired,
+    descendantsIds: ImmutablePropTypes.list.isRequired,
+    intl: PropTypes.object.isRequired,
+    askReplyConfirmation: PropTypes.bool,
+    multiColumn: PropTypes.bool,
+    domain: PropTypes.string.isRequired,
+    pictureInPicture: ImmutablePropTypes.contains({
+      inUse: PropTypes.bool,
+      available: PropTypes.bool,
+    }),
+  };
+
+  state = {
+    fullscreen: false,
+    isExpanded: undefined,
+    threadExpanded: undefined,
+    statusId: undefined,
+    loadedStatusId: undefined,
+    showMedia: undefined,
+    revealBehindCW: undefined,
+  };
+
+  componentDidMount () {
+    attachFullscreenListener(this.onFullScreenChange);
+    this.props.dispatch(fetchStatus(this.props.params.statusId));
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    let update = {};
+    let updated = false;
+
+    if (props.params.statusId && state.statusId !== props.params.statusId) {
+      props.dispatch(fetchStatus(props.params.statusId));
+      update.threadExpanded = undefined;
+      update.statusId = props.params.statusId;
+      updated = true;
+    }
+
+    const revealBehindCW = props.settings.getIn(['media', 'reveal_behind_cw']);
+    if (revealBehindCW !== state.revealBehindCW) {
+      update.revealBehindCW = revealBehindCW;
+      if (revealBehindCW) update.showMedia = defaultMediaVisibility(props.status, props.settings);
+      updated = true;
+    }
+
+    if (props.status && state.loadedStatusId !== props.status.get('id')) {
+      update.showMedia = defaultMediaVisibility(props.status, props.settings);
+      update.loadedStatusId = props.status.get('id');
+      update.isExpanded = autoUnfoldCW(props.settings, props.status);
+      updated = true;
+    }
+
+    return updated ? update : null;
+  }
+
+  handleToggleHidden = () => {
+    const { status } = this.props;
+
+    if (this.props.settings.getIn(['content_warnings', 'shared_state'])) {
+      if (status.get('hidden')) {
+        this.props.dispatch(revealStatus(status.get('id')));
+      } else {
+        this.props.dispatch(hideStatus(status.get('id')));
+      }
+    } else if (this.props.status.get('spoiler_text')) {
+      this.setExpansion(!this.state.isExpanded);
+    }
+  };
+
+  handleToggleMediaVisibility = () => {
+    this.setState({ showMedia: !this.state.showMedia });
+  };
+
+  handleModalFavourite = (status) => {
+    this.props.dispatch(favourite(status));
+  };
+
+  handleFavouriteClick = (status, e) => {
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (status.get('favourited')) {
+        dispatch(unfavourite(status));
+      } else {
+        if ((e && e.shiftKey) || !favouriteModal) {
+          this.handleModalFavourite(status);
+        } else {
+          dispatch(openModal({
+            modalType: 'FAVOURITE',
+            modalProps: {
+              status,
+              onFavourite: this.handleModalFavourite,
+            },
+          }));
+        }
+      }
+    } else {
+      dispatch(openModal({
+        modalType: 'INTERACTION',
+        modalProps: {
+          type: 'favourite',
+          accountId: status.getIn(['account', 'id']),
+          url: status.get('url'),
+        },
+      }));
+    }
+  };
+
+  handlePin = (status) => {
+    if (status.get('pinned')) {
+      this.props.dispatch(unpin(status));
+    } else {
+      this.props.dispatch(pin(status));
+    }
+  };
+
+  handleReplyClick = (status) => {
+    const { askReplyConfirmation, dispatch, intl } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (askReplyConfirmation) {
+        dispatch(openModal({
+          modalType: 'CONFIRM',
+          modalProps: {
+            message: intl.formatMessage(messages.replyMessage),
+            confirm: intl.formatMessage(messages.replyConfirm),
+            onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
+            onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
+          },
+        }));
+      } else {
+        dispatch(replyCompose(status, this.context.router.history));
+      }
+    } else {
+      dispatch(openModal({
+        modalType: 'INTERACTION',
+        modalProps: {
+          type: 'reply',
+          accountId: status.getIn(['account', 'id']),
+          url: status.get('url'),
+        },
+      }));
+    }
+  };
+
+  handleModalReblog = (status, privacy) => {
+    const { dispatch } = this.props;
+
+    if (status.get('reblogged')) {
+      dispatch(unreblog(status));
+    } else {
+      dispatch(reblog(status, privacy));
+    }
+  };
+
+  handleReblogClick = (status, e) => {
+    const { settings, dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
+        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog, missingMediaDescription: true }));
+      } else if ((e && e.shiftKey) || !boostModal) {
+        this.handleModalReblog(status);
+      } else {
+        dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
+      }
+    } else {
+      dispatch(openModal({
+        modalType: 'INTERACTION',
+        modalProps: {
+          type: 'reblog',
+          accountId: status.getIn(['account', 'id']),
+          url: status.get('url'),
+        },
+      }));
+    }
+  };
+
+  handleBookmarkClick = (status) => {
+    if (status.get('bookmarked')) {
+      this.props.dispatch(unbookmark(status));
+    } else {
+      this.props.dispatch(bookmark(status));
+    }
+  };
+
+  handleDeleteClick = (status, history, withRedraft = false) => {
+    const { dispatch, intl } = this.props;
+
+    if (!deleteModal) {
+      dispatch(deleteStatus(status.get('id'), history, withRedraft));
+    } else {
+      dispatch(openModal({
+        modalType: 'CONFIRM',
+        modalProps: {
+          message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
+          confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
+          onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
+        },
+      }));
+    }
+  };
+
+  handleEditClick = (status, history) => {
+    this.props.dispatch(editStatus(status.get('id'), history));
+  };
+
+  handleDirectClick = (account, router) => {
+    this.props.dispatch(directCompose(account, router));
+  };
+
+  handleMentionClick = (account, router) => {
+    this.props.dispatch(mentionCompose(account, router));
+  };
+
+  handleOpenMedia = (media, index, lang) => {
+    this.props.dispatch(openModal({
+      modalType: 'MEDIA',
+      modalProps: { statusId: this.props.status.get('id'), media, index, lang },
+    }));
+  };
+
+  handleOpenVideo = (media, lang, options) => {
+    this.props.dispatch(openModal({
+      modalType: 'VIDEO',
+      modalProps: { statusId: this.props.status.get('id'), media, lang, options },
+    }));
+  };
+
+  handleHotkeyOpenMedia = e => {
+    const { status } = this.props;
+
+    e.preventDefault();
+
+    if (status.get('media_attachments').size > 0) {
+      if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+        this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
+      } else {
+        this.handleOpenMedia(status.get('media_attachments'), 0);
+      }
+    }
+  };
+
+  handleMuteClick = (account) => {
+    this.props.dispatch(initMuteModal(account));
+  };
+
+  handleConversationMuteClick = (status) => {
+    if (status.get('muted')) {
+      this.props.dispatch(unmuteStatus(status.get('id')));
+    } else {
+      this.props.dispatch(muteStatus(status.get('id')));
+    }
+  };
+
+  handleToggleAll = () => {
+    const { status, ancestorsIds, descendantsIds, settings } = this.props;
+    const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
+    let { isExpanded } = this.state;
+
+    if (settings.getIn(['content_warnings', 'shared_state']))
+      isExpanded = !status.get('hidden');
+
+    if (!isExpanded) {
+      this.props.dispatch(revealStatus(statusIds));
+    } else {
+      this.props.dispatch(hideStatus(statusIds));
+    }
+
+    this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded });
+  };
+
+  handleTranslate = status => {
+    const { dispatch } = this.props;
+
+    if (status.get('translation')) {
+      dispatch(undoStatusTranslation(status.get('id'), status.get('poll')));
+    } else {
+      dispatch(translateStatus(status.get('id')));
+    }
+  };
+
+  handleBlockClick = (status) => {
+    const { dispatch } = this.props;
+    const account = status.get('account');
+    dispatch(initBlockModal(account));
+  };
+
+  handleReport = (status) => {
+    this.props.dispatch(initReport(status.get('account'), status));
+  };
+
+  handleEmbed = (status) => {
+    this.props.dispatch(openModal({
+      modalType: 'EMBED',
+      modalProps: { id: status.get('id') },
+    }));
+  };
+
+  handleHotkeyToggleSensitive = () => {
+    this.handleToggleMediaVisibility();
+  };
+
+  handleHotkeyMoveUp = () => {
+    this.handleMoveUp(this.props.status.get('id'));
+  };
+
+  handleHotkeyMoveDown = () => {
+    this.handleMoveDown(this.props.status.get('id'));
+  };
+
+  handleHotkeyReply = e => {
+    e.preventDefault();
+    this.handleReplyClick(this.props.status);
+  };
+
+  handleHotkeyFavourite = () => {
+    this.handleFavouriteClick(this.props.status);
+  };
+
+  handleHotkeyBoost = () => {
+    this.handleReblogClick(this.props.status);
+  };
+
+  handleHotkeyBookmark = () => {
+    this.handleBookmarkClick(this.props.status);
+  };
+
+  handleHotkeyMention = e => {
+    e.preventDefault();
+    this.handleMentionClick(this.props.status);
+  };
+
+  handleHotkeyOpenProfile = () => {
+    this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
+  };
+
+  handleMoveUp = id => {
+    const { status, ancestorsIds, descendantsIds } = this.props;
+
+    if (id === status.get('id')) {
+      this._selectChild(ancestorsIds.size - 1, true);
+    } else {
+      let index = ancestorsIds.indexOf(id);
+
+      if (index === -1) {
+        index = descendantsIds.indexOf(id);
+        this._selectChild(ancestorsIds.size + index, true);
+      } else {
+        this._selectChild(index - 1, true);
+      }
+    }
+  };
+
+  handleMoveDown = id => {
+    const { status, ancestorsIds, descendantsIds } = this.props;
+
+    if (id === status.get('id')) {
+      this._selectChild(ancestorsIds.size + 1, false);
+    } else {
+      let index = ancestorsIds.indexOf(id);
+
+      if (index === -1) {
+        index = descendantsIds.indexOf(id);
+        this._selectChild(ancestorsIds.size + index + 2, false);
+      } else {
+        this._selectChild(index + 1, false);
+      }
+    }
+  };
+
+  _selectChild (index, align_top) {
+    const container = this.node;
+    const element = container.querySelectorAll('.focusable')[index];
+
+    if (element) {
+      if (align_top && container.scrollTop > element.offsetTop) {
+        element.scrollIntoView(true);
+      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
+        element.scrollIntoView(false);
+      }
+      element.focus();
+    }
+  }
+
+  handleHeaderClick = () => {
+    this.column.scrollTop();
+  };
+
+  renderChildren (list, ancestors) {
+    const { params: { statusId } } = this.props;
+
+    return list.map((id, i) => (
+      <StatusContainer
+        key={id}
+        id={id}
+        expanded={this.state.threadExpanded}
+        onMoveUp={this.handleMoveUp}
+        onMoveDown={this.handleMoveDown}
+        contextType='thread'
+        previousId={i > 0 && list.get(i - 1)}
+        nextId={list.get(i + 1) || (ancestors && statusId)}
+        rootId={statusId}
+      />
+    ));
+  }
+
+  setExpansion = value => {
+    this.setState({ isExpanded: value });
+  };
+
+  setRef = c => {
+    this.node = c;
+  };
+
+  setColumnRef = c => {
+    this.column = c;
+  };
+
+  componentDidUpdate (prevProps) {
+    const { status, ancestorsIds, multiColumn } = this.props;
+
+    if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
+      window.requestAnimationFrame(() => {
+        this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
+
+        // In the single-column interface, `scrollIntoView` will put the post behind the header,
+        // so compensate for that.
+        if (!multiColumn) {
+          const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
+          if (offset) {
+            const scrollingElement = document.scrollingElement || document.body;
+            scrollingElement.scrollBy(0, -offset);
+          }
+        }
+      });
+    }
+  }
+
+  componentWillUnmount () {
+    detachFullscreenListener(this.onFullScreenChange);
+  }
+
+  onFullScreenChange = () => {
+    this.setState({ fullscreen: isFullscreen() });
+  };
+
+  render () {
+    let ancestors, descendants;
+    const { isLoading, status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
+    const { fullscreen } = this.state;
+
+    if (isLoading) {
+      return (
+        <Column>
+          <LoadingIndicator />
+        </Column>
+      );
+    }
+
+    if (status === null) {
+      return (
+        <BundleColumnError multiColumn={multiColumn} errorType='routing' />
+      );
+    }
+
+    const isExpanded = settings.getIn(['content_warnings', 'shared_state']) ? !status.get('hidden') : this.state.isExpanded;
+
+    if (ancestorsIds && ancestorsIds.size > 0) {
+      ancestors = <>{this.renderChildren(ancestorsIds, true)}</>;
+    }
+
+    if (descendantsIds && descendantsIds.size > 0) {
+      descendants = <>{this.renderChildren(descendantsIds)}</>;
+    }
+
+    const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
+    const isIndexable = !status.getIn(['account', 'noindex']);
+
+    const handlers = {
+      moveUp: this.handleHotkeyMoveUp,
+      moveDown: this.handleHotkeyMoveDown,
+      reply: this.handleHotkeyReply,
+      favourite: this.handleHotkeyFavourite,
+      boost: this.handleHotkeyBoost,
+      bookmark: this.handleHotkeyBookmark,
+      mention: this.handleHotkeyMention,
+      openProfile: this.handleHotkeyOpenProfile,
+      toggleSpoiler: this.handleToggleHidden,
+      toggleSensitive: this.handleHotkeyToggleSensitive,
+      openMedia: this.handleHotkeyOpenMedia,
+    };
+
+    return (
+      <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
+        <ColumnHeader
+          icon='comment'
+          title={intl.formatMessage(messages.tootHeading)}
+          onClick={this.handleHeaderClick}
+          showBackButton
+          multiColumn={multiColumn}
+          extraButton={(
+            <button type='button' className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
+          )}
+        />
+
+        <ScrollContainer scrollKey='thread'>
+          <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
+            {ancestors}
+
+            <HotKeys handlers={handlers}>
+              <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
+                <DetailedStatus
+                  key={`details-${status.get('id')}`}
+                  status={status}
+                  settings={settings}
+                  onOpenVideo={this.handleOpenVideo}
+                  onOpenMedia={this.handleOpenMedia}
+                  expanded={isExpanded}
+                  onToggleHidden={this.handleToggleHidden}
+                  onTranslate={this.handleTranslate}
+                  domain={domain}
+                  showMedia={this.state.showMedia}
+                  onToggleMediaVisibility={this.handleToggleMediaVisibility}
+                  pictureInPicture={pictureInPicture}
+                />
+
+                <ActionBar
+                  key={`action-bar-${status.get('id')}`}
+                  status={status}
+                  onReply={this.handleReplyClick}
+                  onFavourite={this.handleFavouriteClick}
+                  onReblog={this.handleReblogClick}
+                  onBookmark={this.handleBookmarkClick}
+                  onDelete={this.handleDeleteClick}
+                  onEdit={this.handleEditClick}
+                  onDirect={this.handleDirectClick}
+                  onMention={this.handleMentionClick}
+                  onMute={this.handleMuteClick}
+                  onMuteConversation={this.handleConversationMuteClick}
+                  onBlock={this.handleBlockClick}
+                  onReport={this.handleReport}
+                  onPin={this.handlePin}
+                  onEmbed={this.handleEmbed}
+                />
+              </div>
+            </HotKeys>
+
+            {descendants}
+          </div>
+        </ScrollContainer>
+
+        <Helmet>
+          <title>{titleFromStatus(intl, status)}</title>
+          <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
+          <link rel='canonical' href={status.get('url')} />
+        </Helmet>
+      </Column>
+    );
+  }
+
+}
+
+export default injectIntl(connect(makeMapStateToProps)(Status));
--- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx
@ -21,7 +21,7 @@ const messages = defineMessages({
  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' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
--- a/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx
@ -34,7 +34,7 @@ const SignInBanner = () => {

  return (
    <div className='sign-in-banner'>
-      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favourite, share and reply to posts. You can also interact from your account on a different server.' /></p>
+      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
      {signupButton}
      <a href='/auth/sign_in' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
    </div>
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@ -191,6 +191,7 @@ class SwitchingColumnsArea extends PureComponent {

          {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
          {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={pathName.slice(5)} /> : null}
+          {!singleColumn && pathName === '/getting-started' ? <Redirect from='/getting-started' to='/deck/getting-started' exact /> : null}

          <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
          <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@ -577,7 +577,10 @@ class Video extends PureComponent {

        <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
          <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
+            <span className='spoiler-button__overlay__label'>
+              {warning}
+              <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+            </span>
          </button>
        </div>

--- a/app/javascript/flavours/glitch/locales/ar.json
+++ b/app/javascript/flavours/glitch/locales/ar.json
@ -85,7 +85,6 @@
  "onboarding.page_six.guidelines": "إرشادات المجتمع",
  "onboarding.page_six.read_guidelines": "الرجاء قراءة {guidelines} من {domain}!",
  "onboarding.skip": "تخطي",
-  "search_popout.search_format": "نمط البحث المتقدم",
  "settings.close": "إغلاق",
  "settings.content_warnings": "Content warnings",
  "settings.preferences": "Preferences",
--- a/app/javascript/flavours/glitch/locales/de.json
+++ b/app/javascript/flavours/glitch/locales/de.json
@ -95,12 +95,6 @@
  "onboarding.page_three.search": "Benutze die Suchleiste, um Leute zu finden und Hashtags anzusehen, wie etwa {illustration} und {introductions}. Um nach einer Person zu suchen, die nicht auf dieser Instanz ist, benutze deren vollständigen Nutzername.",
  "onboarding.page_two.compose": "Schreibe Posts in der Verfassen-Spalte. Mit den Symbolen unten kannst du Bilder hochladen, Privatsphäre-Einstellungen ändern, und Inhaltswarnungen hinzufügen.",
  "onboarding.skip": "Überspringen",
-  "search_popout.search_format": "Erweitertes Suchformat",
-  "search_popout.tips.full_text": "Simple Suchanfragen geben sowohl Beiträge, die du geschrieben, favorisiert oder geteilt hast oder in denen du erwähnt wurdest, als auch passende Nutzernamen, Anzeigenamen oder Hashtags, zurück.",
-  "search_popout.tips.hashtag": "Hashtag",
-  "search_popout.tips.status": "Beitrag",
-  "search_popout.tips.text": "Simple Suchanfragen geben passende Nutzernamen, Anzeigenamen oder Hashtags zurück",
-  "search_popout.tips.user": "Nutzer",
  "settings.always_show_spoilers_field": "Das Inhaltswarnungs-Feld immer aktivieren",
  "settings.auto_collapse": "Automatisches Einklappen",
  "settings.auto_collapse_all": "Alles",
--- a/app/javascript/flavours/glitch/locales/en.json
+++ b/app/javascript/flavours/glitch/locales/en.json
@ -98,12 +98,6 @@
  "onboarding.page_three.search": "Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.",
  "onboarding.page_two.compose": "Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.",
  "onboarding.skip": "Skip",
-  "search_popout.search_format": "Advanced search format",
-  "search_popout.tips.full_text": "Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.",
-  "search_popout.tips.hashtag": "hashtag",
-  "search_popout.tips.status": "status",
-  "search_popout.tips.text": "Simple text returns matching display names, usernames and hashtags",
-  "search_popout.tips.user": "user",
  "settings.always_show_spoilers_field": "Always enable the Content Warning field",
  "settings.auto_collapse": "Automatic collapsing",
  "settings.auto_collapse_all": "Everything",
--- a/app/javascript/flavours/glitch/locales/eo.json
+++ b/app/javascript/flavours/glitch/locales/eo.json
@ -70,11 +70,6 @@
  "onboarding.page_six.various_app": "poŝtelefonaj aplikaĵoj",
  "onboarding.page_three.profile": "Redakti vian profilon por ŝanĝi vian profilbildon, biografion kaj montro-nomon. Vi povas ankaŭ trovi aliajn agordojn tie.",
  "onboarding.skip": "Preterlasi",
-  "search_popout.search_format": "Detala serĉformato",
-  "search_popout.tips.hashtag": "kradvorto",
-  "search_popout.tips.status": "afiŝo",
-  "search_popout.tips.text": "Simpla teksta serĉo montras la kongruajn afiŝitajn nomojn, uzantnomojn kaj kradvortojn",
-  "search_popout.tips.user": "uzanto",
  "settings.auto_collapse_all": "Ĉiuj",
  "settings.auto_collapse_lengthy": "Longaj afiŝoj",
  "settings.auto_collapse_media": "Afiŝoj kun aŭdovidaĵoj",
--- a/app/javascript/flavours/glitch/locales/es-AR.json
+++ b/app/javascript/flavours/glitch/locales/es-AR.json
@ -98,12 +98,6 @@
  "onboarding.page_three.search": "Usa la barra de búsqueda para encontrar gente y mirar las etiquetas (hashtags), como {illustration} y {introductions}. Para buscar a una persona que no esté en esta instancia, utiliza su alias completo.",
  "onboarding.page_two.compose": "Escribe mensajes desde la columna de composición. Puedes subir imágenes, cambiar la configuración de privacidad y añadir advertencias de contenido con los iconos de abajo.",
  "onboarding.skip": "Saltar",
-  "search_popout.search_format": "Formato de búsqueda avanzada",
-  "search_popout.tips.full_text": "Las búsquedas de texto simple devuelven los mensajes que escribiste, los marcados como favoritos, los adheridos o en los que te mencionaron, así como nombres de usuarios, nombres mostrados y etiquetas.",
-  "search_popout.tips.hashtag": "etiqueta",
-  "search_popout.tips.status": "mensaje",
-  "search_popout.tips.text": "Las búsquedas de texto simple devuelven nombres de usuarios, nombres mostrados y etiquetas que coincidan",
-  "search_popout.tips.user": "usuario",
  "settings.always_show_spoilers_field": "Siempre mostrar el campo de advertencia de contenido",
  "settings.auto_collapse": "Colapsar automáticamente",
  "settings.auto_collapse_all": "Todo",
--- a/app/javascript/flavours/glitch/locales/fa.json
+++ b/app/javascript/flavours/glitch/locales/fa.json
@ -36,7 +36,6 @@
  "onboarding.page_one.welcome": "به {domain} خوش آمدید!",
  "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.",
  "onboarding.page_six.various_app": "کاره‌های موبایل",
-  "search_popout.tips.user": "کاربر",
  "settings.auto_collapse_reblogs": "تقویت‌ها",
  "settings.auto_collapse_replies": "پاسخ‌ها",
  "settings.close": "بستن",
--- a/app/javascript/flavours/glitch/locales/ko.json
+++ b/app/javascript/flavours/glitch/locales/ko.json
@ -95,12 +95,6 @@
  "onboarding.page_three.search": "검색창을 사용해 사람들과 해시태그를 찾아보세요. 예를 들면 {illustration}이라든지 {introcustions} 같은 것으로요. 이 인스턴스에 있지 않은 사람을 찾으려면, 전체 핸들을 사용하세요.",
  "onboarding.page_two.compose": "작성 컬럼에서 게시물을 작성하세요. 그림을 업로드 할 수 있고, 공개설정을 바꿀 수도 있으며, 아래 아이콘을 통해 열람주의 텍스트를 설정할 수 있습니다.",
  "onboarding.skip": "건너뛰기",
-  "search_popout.search_format": "고급 검색 방법",
-  "search_popout.tips.full_text": "단순한 텍스트 검색은 작성한 게시물 그리고 좋아요, 부스트, 받은 멘션, 사용자명, 표시 이름, 해시태그를 반환합니다.",
-  "search_popout.tips.hashtag": "해시태그",
-  "search_popout.tips.status": "게시물",
-  "search_popout.tips.text": "단순한 텍스트 검색은 관계된 프로필 이름, 사용자명 그리고 해시태그를 표시합니다",
-  "search_popout.tips.user": "사용자",
  "settings.always_show_spoilers_field": "열람주의 항목을 언제나 활성화",
  "settings.auto_collapse": "자동으로 접기",
  "settings.auto_collapse_all": "모두",
--- a/app/javascript/flavours/glitch/locales/pl.json
+++ b/app/javascript/flavours/glitch/locales/pl.json
@ -95,12 +95,6 @@
  "onboarding.page_three.search": "Użyj paska wyszukiwania aby znaleźć osoby i hasztagi, takie jak {illustration} i {introductions}. Aby znaleźć osobę niebędącą na tym serwerze użyj jej pełnego adresu.",
  "onboarding.page_two.compose": "Twórz nowe wpisy w lewej kolumnie. Możesz wysłać zdjęcia, zmienić ustawienia prywatności i ukryć wpis za ostrzeżeniem używając poniższych ikon.",
  "onboarding.skip": "Pomiń",
-  "search_popout.search_format": "Zaawansowane wyszukiwanie",
-  "search_popout.tips.full_text": "Proste wyszukiwanie twoich wpisów, ulubionych, podbić i nawiązań, a także pasujących pseudonimów, nazw użytkownika i hasztagów.",
-  "search_popout.tips.hashtag": "hasztag",
-  "search_popout.tips.status": "wpis",
-  "search_popout.tips.text": "Proste wyszukiwanie pasujących pseudonimów, nazw użytkownika i hasztagów",
-  "search_popout.tips.user": "użytkownik",
  "settings.always_show_spoilers_field": "Zawsze pokazuj pole ostrzeżenia o zawartości",
  "settings.auto_collapse": "Automatyczne zwijanie",
  "settings.auto_collapse_all": "Wszystko",
--- a/app/javascript/flavours/glitch/locales/pt-BR.json
+++ b/app/javascript/flavours/glitch/locales/pt-BR.json
@ -95,12 +95,6 @@
  "onboarding.page_three.search": "Use a barra de busca para encontrar pessoas e procure hashtags, tais como {illustration} e {introductions}. Para procurar uma pessoa que não esteja neste caso, use o identificador completo.",
  "onboarding.page_two.compose": "Escreva as postagens a partir da coluna de composição. Você pode enviar imagens, alterar as configurações de privacidade e adicionar avisos de conteúdo com os ícones abaixo.",
  "onboarding.skip": "Pular",
-  "search_popout.search_format": "Formato de pesquisa avançada",
-  "search_popout.tips.full_text": "Pesquisa simples retorna publicações que você escreveu, favoritou ou deu boost, publicações que mencionam você, nomes de usuário, nomes de exibição e hashtags.",
-  "search_popout.tips.hashtag": "hashtag",
-  "search_popout.tips.status": "status",
-  "search_popout.tips.text": "Pesquisa simples retorna nomes de exibição, nomes de usuário e hashtags correspondentes",
-  "search_popout.tips.user": "usuário",
  "settings.always_show_spoilers_field": "Sempre ativar o campo Aviso de Conteúdo",
  "settings.auto_collapse": "Colapso automático",
  "settings.auto_collapse_all": "Tudo",
--- a/app/javascript/flavours/glitch/locales/pt-PT.json
+++ b/app/javascript/flavours/glitch/locales/pt-PT.json
@ -4,7 +4,9 @@
  "account.disclaimer_full": "As informações abaixo podem não refletir completamente o perfil do utilizador.",
  "account.follows": "A seguir",
  "account.joined": "Juntou-se em {date}",
+  "account.mute_notifications": "Silenciar notificações de @{name}",
  "account.suspended_disclaimer_full": "Este utilizador foi suspenso por um elemento da moderação.",
+  "account.unmute_notifications": "Desativar o silenciamento das notificações de @{name}",
  "account.view_full_profile": "Ver o perfil completo",
  "account_note.cancel": "Cancelar",
  "account_note.edit": "Editar",
@ -18,6 +20,8 @@
  "advanced_options.threaded_mode.short": "Modo de fio",
  "advanced_options.threaded_mode.tooltip": "Modo de fio ativado",
  "boost_modal.missing_description": "Este post contém alguns media sem descrição",
+  "column.favourited_by": "Adicionado aos favoritos de",
+  "column.heading": "Diversos",
  "empty_column.follow_recommendations": "Parece que não foi possível gerar nenhuma sugestão para si. Pode tentar utilizar a pesquisa para procurar pessoas que conheça ou explorar as #etiquetas em destaque.",
  "follow_recommendations.done": "Concluído",
  "follow_recommendations.heading": "Siga pessoas das quais gostaria de ver publicações! Aqui estão algumas sugestões.",
--- a/app/javascript/flavours/glitch/locales/tr.json
+++ b/app/javascript/flavours/glitch/locales/tr.json
@ -54,9 +54,6 @@
  "follow_recommendations.lead": "Takip ettiğiniz kişilerin gönderileri anasayfa akışınızda kronolojik sırada görünmeye devam edecek. Hata yapmaktan çekinmeyin, kişileri istediğiniz anda kolayca takipten çıkabilirsiniz!",
  "onboarding.page_one.federation": "{domain} is an \"instance\" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
  "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.",
-  "search_popout.tips.status": "durum",
-  "search_popout.tips.text": "Basit metin, eşleşen görünen adları, kullanıcı adlarını ve hashtag'leri döndürür",
-  "search_popout.tips.user": "kullanıcı",
  "settings.always_show_spoilers_field": "Her zaman İçerik Uyarısı alanını etkinleştir",
  "settings.auto_collapse": "Otomatik küçülme",
  "settings.auto_collapse_all": "Her şey",
--- a/app/javascript/flavours/glitch/locales/uk.json
+++ b/app/javascript/flavours/glitch/locales/uk.json
@ -95,12 +95,6 @@
  "onboarding.page_three.search": "Використовуйте рядок пошуку, щоб знайти людей, і шукайте за хештегами, такими як {illustration} та {introductions}. Щоб знайти людину, якої немає в цьому інстансі, використовуйте її повне ім'я.",
  "onboarding.page_two.compose": "Писати дописи зі стовпчика \"Створити\". Ви можете завантажувати зображення, змінювати налаштування конфіденційності та додавати попередження про вміст за допомогою іконок нижче.",
  "onboarding.skip": "Пропустити",
-  "search_popout.search_format": "Розширений формат пошуку",
-  "search_popout.tips.full_text": "Простий текст повертає статуси, які ви написали, вподобали, підвищили або в яких вас згадували, а також відповідні імена користувачів, імена на екрані та хештеги.",
-  "search_popout.tips.hashtag": "гештег",
-  "search_popout.tips.status": "статус",
-  "search_popout.tips.text": "Пошук за текстом знаходить імена користувачів, реальні імена та хештеґи",
-  "search_popout.tips.user": "користувач",
  "settings.always_show_spoilers_field": "Завжди вмикати попередження про вміст",
  "settings.auto_collapse": "Автоматичне згортання",
  "settings.auto_collapse_all": "Все",
--- a/app/javascript/flavours/glitch/locales/zh-CN.json
+++ b/app/javascript/flavours/glitch/locales/zh-CN.json
@ -98,12 +98,6 @@
  "onboarding.page_three.search": "使用搜索栏查找用户并查看标签，例如 #illustration 和 #introductions。要查找不在此实例中的用户，请使用他们的完整用户名。",
  "onboarding.page_two.compose": "在撰写框中撰写嘟文。你可以使用下方图标上传图片、更改隐私设置和添加内容警告。",
  "onboarding.skip": "跳过",
-  "search_popout.search_format": "高级搜索格式",
-  "search_popout.tips.full_text": "输入关键词检索所有你发送、点赞、转嘟过或提及到你的嘟文，以及其他用户公开的用户名、昵称和话题标签。",
-  "search_popout.tips.hashtag": "话题标签",
-  "search_popout.tips.status": "状态",
-  "search_popout.tips.text": "输入关键词检索昵称、用户名和话题标签",
-  "search_popout.tips.user": "用户",
  "settings.always_show_spoilers_field": "始终显示内容警告框",
  "settings.auto_collapse": "自动折叠",
  "settings.auto_collapse_all": "所有",
--- a/app/javascript/flavours/glitch/locales/zh-TW.json
+++ b/app/javascript/flavours/glitch/locales/zh-TW.json
@ -51,7 +51,6 @@
  "notification_purge.btn_none": "取消選取",
  "onboarding.page_one.federation": "{domain} is an \"instance\" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
  "onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.",
-  "search_popout.tips.hashtag": "主題標籤",
  "settings.always_show_spoilers_field": "永遠啟用內容警告欄位",
  "settings.auto_collapse": "自動折疊",
  "settings.auto_collapse_all": "全部",
--- a/app/javascript/flavours/glitch/reducers/search.js
+++ b/app/javascript/flavours/glitch/reducers/search.js
@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';

 import {
  COMPOSE_MENTION,
@ -13,6 +13,8 @@ import {
  SEARCH_FETCH_SUCCESS,
  SEARCH_SHOW,
  SEARCH_EXPAND_SUCCESS,
+  SEARCH_RESULT_CLICK,
+  SEARCH_RESULT_FORGET,
 } from 'flavours/glitch/actions/search';

 const initialState = ImmutableMap({
@ -22,6 +24,7 @@ const initialState = ImmutableMap({
  results: ImmutableMap(),
  isLoading: false,
  searchTerm: '',
+  recent: ImmutableOrderedSet(),
 });

 export default function search(state = initialState, action) {
@ -62,6 +65,10 @@ export default function search(state = initialState, action) {
  case SEARCH_EXPAND_SUCCESS:
    const results = action.searchType === 'hashtags' ? fromJS(action.results.hashtags) : action.results[action.searchType].map(item => item.id);
    return state.updateIn(['results', action.searchType], list => list.concat(results));
+  case SEARCH_RESULT_CLICK:
+    return state.update('recent', set => set.add(fromJS(action.result)));
+  case SEARCH_RESULT_FORGET:
+    return state.update('recent', set => set.filterNot(result => result.get('q') === action.q));
  default:
    return state;
  }
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@ -3,11 +3,16 @@ import { Map as ImmutableMap, fromJS } from 'immutable';
 import {
  REBLOG_REQUEST,
  REBLOG_FAIL,
+  UNREBLOG_REQUEST,
+  UNREBLOG_FAIL,
  FAVOURITE_REQUEST,
  FAVOURITE_FAIL,
-  UNFAVOURITE_SUCCESS,
+  UNFAVOURITE_REQUEST,
+  UNFAVOURITE_FAIL,
  BOOKMARK_REQUEST,
  BOOKMARK_FAIL,
+  UNBOOKMARK_REQUEST,
+  UNBOOKMARK_FAIL,
 } from 'flavours/glitch/actions/interactions';
 import {
  STATUS_MUTE_SUCCESS,
@ -75,18 +80,28 @@ export default function statuses(state = initialState, action) {
    return importStatuses(state, action.statuses);
  case FAVOURITE_REQUEST:
    return state.setIn([action.status.get('id'), 'favourited'], true);
-  case UNFAVOURITE_SUCCESS:
-    return state.updateIn([action.status.get('id'), 'favourites_count'], x => Math.max(0, x - 1));
  case FAVOURITE_FAIL:
    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
+  case UNFAVOURITE_REQUEST:
+    return state.setIn([action.status.get('id'), 'favourited'], false);
+  case UNFAVOURITE_FAIL:
+    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], true);
  case BOOKMARK_REQUEST:
-    return state.setIn([action.status.get('id'), 'bookmarked'], true);
+    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], true);
  case BOOKMARK_FAIL:
    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], false);
+  case UNBOOKMARK_REQUEST:
+    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], false);
+  case UNBOOKMARK_FAIL:
+    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'bookmarked'], true);
  case REBLOG_REQUEST:
    return state.setIn([action.status.get('id'), 'reblogged'], true);
  case REBLOG_FAIL:
    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], false);
+  case UNREBLOG_REQUEST:
+    return state.setIn([action.status.get('id'), 'reblogged'], false);
+  case UNREBLOG_FAIL:
+    return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], true);
  case STATUS_MUTE_SUCCESS:
    return state.setIn([action.id, 'muted'], true);
  case STATUS_UNMUTE_SUCCESS:
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@ -99,10 +99,6 @@
  }
 }

-.search-popout {
-  @include search-popout;
-}
-
 .navigation-bar {
  padding: 10px;
  color: $darker-text-color;
--- a/app/javascript/flavours/glitch/styles/components/explore.scss
+++ b/app/javascript/flavours/glitch/styles/components/explore.scss
@ -18,6 +18,10 @@
    padding: 10px;
  }

+  .search__popout {
+    border: 1px solid lighten($ui-base-color, 8%);
+  }
+
  .search .fa {
    top: 10px;
    inset-inline-end: 10px;
@ -40,8 +44,9 @@
  align-items: center;
  color: $primary-text-color;
  text-decoration: none;
-  padding: 15px 0;
+  padding: 15px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  gap: 15px;

  &:last-child {
    border-bottom: 0;
@ -50,33 +55,40 @@
  &:hover,
  &:active,
  &:focus {
-    background-color: lighten($ui-base-color, 4%);
+    color: $highlight-text-color;
+
+    .story__details__publisher,
+    .story__details__shared {
+      color: $highlight-text-color;
+    }
  }

  &__details {
-    padding: 0 15px;
    flex: 1 1 auto;

    &__publisher {
      color: $darker-text-color;
-      margin-bottom: 4px;
+      margin-bottom: 8px;
    }

    &__title {
      font-size: 19px;
      line-height: 24px;
      font-weight: 500;
-      margin-bottom: 4px;
+      margin-bottom: 8px;
    }

    &__shared {
      color: $darker-text-color;
    }
+
+    strong {
+      font-weight: 500;
+    }
  }

  &__thumbnail {
    flex: 0 0 auto;
-    margin: 0 15px;
    position: relative;
    width: 120px;
    height: 120px;
@ -87,7 +99,7 @@
    }

    img {
-      border-radius: 4px;
+      border-radius: 8px;
      display: block;
      margin: 0;
      width: 100%;
@ -96,7 +108,7 @@
    }

    &__preview {
-      border-radius: 4px;
+      border-radius: 8px;
      display: block;
      margin: 0;
      width: 100%;
@ -112,4 +124,21 @@
      }
    }
  }
+
+  &.expanded {
+    flex-direction: column;
+
+    .story__thumbnail {
+      order: 1;
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1.91 / 1;
+    }
+
+    .story__details {
+      order: 2;
+      width: 100%;
+      flex: 0 0 auto;
+    }
+  }
 }
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@ -1351,6 +1351,8 @@ button.icon-button.active i.fa-retweet {
    padding: 0;
    margin: 0;
    border: 0;
+    border-radius: 4px;
+    color: $white;

    &__label {
      display: flex;
@ -1358,7 +1360,6 @@ button.icon-button.active i.fa-retweet {
      justify-content: center;
      gap: 8px;
      flex-direction: column;
-      color: $primary-text-color;
      font-weight: 500;
      font-size: 14px;
    }
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@ -1306,13 +1306,13 @@ img.modal-warning {
 .interaction-modal {
  max-width: 90vw;
  width: 600px;
-  background: $ui-base-color;
+  background: var(--modal-background-color);
+  border: 1px solid var(--modal-border-color);
  border-radius: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
  position: relative;
  display: block;
-  padding: 20px;
+  padding: 40px;

  h3 {
    font-size: 22px;
@ -1321,63 +1321,100 @@ img.modal-warning {
    text-align: center;
  }

+  p {
+    font-size: 17px;
+    line-height: 22px;
+    color: $darker-text-color;
+
+    strong {
+      color: $primary-text-color;
+      font-weight: 700;
+    }
+  }
+
+  p.hint {
+    margin-bottom: 14px;
+    font-size: 14px;
+  }
+
  &__icon {
    color: $highlight-text-color;
    margin: 0 5px;
  }

  &__lead {
-    padding: 20px;
-    text-align: center;
+    margin-bottom: 20px;

    h3 {
      margin-bottom: 15px;
    }
-
-    p {
-      font-size: 17px;
-      line-height: 22px;
-      color: $darker-text-color;
-    }
  }

-  &__choices {
-    display: flex;
+  &__login {
+    position: relative;
+    margin-bottom: 20px;

-    &__choice {
-      flex: 0 0 auto;
-      width: 50%;
-      box-sizing: border-box;
-      padding: 20px;
+    &__input {
+      @include search-input;

-      h3 {
-        margin-bottom: 20px;
-      }
+      border: 1px solid lighten($ui-base-color, 8%);
+      padding: 4px 6px;
+      color: $primary-text-color;
+      font-size: 16px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;

-      p {
-        color: $darker-text-color;
-        margin-bottom: 20px;
+      input {
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        border: 0;
+        padding: 15px - 4px 15px - 6px;
+        flex: 1 1 auto;
+
+        &::placeholder {
+          color: lighten($darker-text-color, 4%);
+        }
+
+        &:focus {
+          outline: 0;
+        }
      }

      .button {
-        margin-bottom: 10px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
+        flex: 0 0 auto;
      }
    }
+
+    .search__popout {
+      margin-top: -1px;
+      padding-top: 5px;
+      padding-bottom: 5px;
+      border: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    &.focused &__input {
+      border-color: $highlight-text-color;
+      background: lighten($ui-base-color, 4%);
+    }
+
+    &.invalid &__input {
+      border-color: $error-red;
+    }
+
+    &.expanded .search__popout {
+      display: block;
+    }
+
+    &.expanded &__input {
+      border-radius: 4px 4px 0 0;
+    }
  }

-  @media screen and (max-width: $no-gap-breakpoint - 1px) {
-    &__choices {
-      display: block;
-
-      &__choice {
-        width: auto;
-        margin-bottom: 20px;
-      }
-    }
+  .link-button {
+    font-size: inherit;
+    display: inline;
  }
 }

--- a/app/javascript/flavours/glitch/styles/components/modal.scss.orig
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss.orig
--- a/app/javascript/flavours/glitch/styles/components/search.scss
+++ b/app/javascript/flavours/glitch/styles/components/search.scss
@ -1,6 +1,86 @@
 .search {
  margin-bottom: 10px;
  position: relative;
+
+  &__popout {
+    box-sizing: border-box;
+    display: none;
+    position: absolute;
+    inset-inline-start: 0;
+    margin-top: -2px;
+    width: 100%;
+    background: $ui-base-color;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+    z-index: 99;
+    font-size: 13px;
+    padding: 15px 5px;
+
+    h4 {
+      text-transform: uppercase;
+      color: $dark-text-color;
+      font-weight: 500;
+      padding: 0 10px;
+      margin-bottom: 10px;
+    }
+
+    &__menu {
+      &__message {
+        color: $dark-text-color;
+        padding: 0 10px;
+      }
+
+      &__item {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 0;
+        font: inherit;
+        background: transparent;
+        color: $darker-text-color;
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 4px;
+        text-align: start;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &--flex {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        .icon-button {
+          transition: none;
+        }
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.selected {
+          background: $ui-highlight-color;
+          color: $primary-text-color;
+
+          .icon-button {
+            color: $primary-text-color;
+          }
+        }
+
+        mark {
+          background: transparent;
+          font-weight: 700;
+          color: $primary-text-color;
+        }
+      }
+    }
+  }
+
+  &.active {
+    .search__popout {
+      display: block;
+    }
+  }
 }

 .search__input {
@ -45,7 +125,6 @@
    position: absolute;
    top: 16px;
    inset-inline-end: 10px;
-    z-index: 2;
    display: inline-block;
    opacity: 0;
    transition: all 100ms linear;
@ -241,5 +320,6 @@

  &--compact &__item {
    padding: 10px;
+    padding-inline-end: 28px;
  }
 }
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@ -24,13 +24,16 @@ html {
 .column > .scrollable,
 .getting-started,
 .column-inline-form,
-.error-column,
 .regeneration-indicator {
  background: $white;
  border: 1px solid lighten($ui-base-color, 8%);
  border-top: 0;
 }

+.error-column {
+  border: 1px solid lighten($ui-base-color, 8%);
+}
+
 .column > .scrollable.about {
  border-top: 1px solid lighten($ui-base-color, 8%);
 }
--- a/app/javascript/flavours/glitch/styles/polls.scss
+++ b/app/javascript/flavours/glitch/styles/polls.scss
@ -127,11 +127,6 @@
      border-radius: 4px;
    }

-    &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-
    &:active,
    &:focus,
    &:hover {
@ -139,6 +134,11 @@
      border-width: 4px;
    }

+    &.active {
+      background-color: $valid-value-color;
+      border-color: $valid-value-color;
+    }
+
    &::-moz-focus-inner {
      outline: 0 !important;
      border: 0;
@ -223,6 +223,14 @@
    padding: 10px;
  }

+  .poll__input {
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: $ui-button-focus-background-color;
+    }
+  }
+
  .poll__footer {
    border-top: 1px solid darken($simple-background-color, 8%);
    padding: 10px;
@ -249,6 +257,14 @@
    color: $action-button-color;
    border-color: $action-button-color;
    margin-inline-end: 5px;
+
+    &:hover,
+    &:focus,
+    &.active {
+      border-color: $action-button-color;
+      background-color: $action-button-color;
+      color: $ui-button-color;
+    }
  }

  li {
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@ -98,4 +98,6 @@ $dismiss-overlay-width: 4rem;
  --dropdown-background-color: #{lighten($ui-base-color, 4%)};
  --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
    0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
+  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
 }
--- a/app/javascript/flavours/glitch/types/resources.ts
+++ b/app/javascript/flavours/glitch/types/resources.ts
@ -33,6 +33,7 @@ interface AccountApiResponseValues {
  note: string;
  statuses_count: number;
  url: string;
+  uri: string;
  username: string;
 }

--- a/app/javascript/flavours/glitch/utils/hashtags.ts
+++ b/app/javascript/flavours/glitch/utils/hashtags.ts
@ -0,0 +1,29 @@
+const HASHTAG_SEPARATORS = '_\\u00b7\\u200c';
+const ALPHA = '\\p{L}\\p{M}';
+const WORD = '\\p{L}\\p{M}\\p{N}\\p{Pc}';
+
+const buildHashtagPatternRegex = () => {
+  try {
+    return new RegExp(
+      `(?:^|[^\\/\\)\\w])#(([${WORD}_][${WORD}${HASHTAG_SEPARATORS}]*[${ALPHA}${HASHTAG_SEPARATORS}][${WORD}${HASHTAG_SEPARATORS}]*[${WORD}_])|([${WORD}_]*[${ALPHA}][${WORD}_]*))`,
+      'iu',
+    );
+  } catch {
+    return /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i;
+  }
+};
+
+const buildHashtagRegex = () => {
+  try {
+    return new RegExp(
+      `^(([${WORD}_][${WORD}${HASHTAG_SEPARATORS}]*[${ALPHA}${HASHTAG_SEPARATORS}][${WORD}${HASHTAG_SEPARATORS}]*[${WORD}_])|([${WORD}_]*[${ALPHA}][${WORD}_]*))$`,
+      'iu',
+    );
+  } catch {
+    return /^(\w*[a-zA-Z·]\w*)$/i;
+  }
+};
+
+export const HASHTAG_PATTERN_REGEX = buildHashtagPatternRegex();
+
+export const HASHTAG_REGEX = buildHashtagRegex();