Rebase to current 4.3.0-alpha-glitch-soc, update theming files

app/javascript/flavours/glitch/components/column_back_button.jsx.orig

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+
+import { FormattedMessage } from 'react-intl';
+
+import { withRouter } from 'react-router-dom';
+
+import { Icon }  from 'flavours/glitch/components/icon';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+
+export class ColumnBackButton extends PureComponent {
+
+  static propTypes = {
+    multiColumn: PropTypes.bool,
+    onClick: PropTypes.func,
+    ...WithRouterPropTypes,
+  };
+
+  handleClick = () => {
+<<<<<<< HEAD:app/javascript/flavours/glitch/components/column_back_button.jsx
+    const { onClick, history } = this.props;
+
+    if (onClick) {
+      onClick();
+    } else if (history.location?.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+=======
+    if (window.history && window.history.state) {
+      this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
+>>>>>>> 37a28ba20 (Do not leave Mastodon when clicking “Back” (#23953)):app/javascript/mastodon/components/column_back_button.js
+    }
+  };
+
+  render () {
+    const { multiColumn } = this.props;
+
+    const component = (
+      <button onClick={this.handleClick} className='column-back-button'>
+        <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+        <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+      </button>
+    );
+
+    if (multiColumn) {
+      return component;
+    } else {
+      // The portal container and the component may be rendered to the DOM in
+      // the same React render pass, so the container might not be available at
+      // the time `render()` is called.
+      const container = document.getElementById('tabs-bar__portal');
+      if (container === null) {
+        // The container wasn't available, force a re-render so that the
+        // component can eventually be inserted in the container and not scroll
+        // with the rest of the area.
+        this.forceUpdate();
+        return component;
+      } else {
+        return createPortal(component, container);
+      }
+    }
+  }
+
+}
+
+export default withRouter(ColumnBackButton);

app/javascript/flavours/glitch/components/column_header.jsx.orig

@@ -0,0 +1,226 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+
+import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
+
+import { Icon }  from 'flavours/glitch/components/icon';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+
+const messages = defineMessages({
+  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+  moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
+  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
+});
+
+class ColumnHeader extends PureComponent {
+
+  static contextTypes = {
+    identity: PropTypes.object,
+  };
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    title: PropTypes.node,
+    icon: PropTypes.string,
+    active: PropTypes.bool,
+    multiColumn: PropTypes.bool,
+    extraButton: PropTypes.node,
+    showBackButton: PropTypes.bool,
+    children: PropTypes.node,
+    pinned: PropTypes.bool,
+    placeholder: PropTypes.bool,
+    onPin: PropTypes.func,
+    onMove: PropTypes.func,
+    onClick: PropTypes.func,
+    appendContent: PropTypes.node,
+    collapseIssues: PropTypes.bool,
+    ...WithRouterPropTypes,
+  };
+
+  state = {
+    collapsed: true,
+    animating: false,
+  };
+
+  handleToggleClick = (e) => {
+    e.stopPropagation();
+    this.setState({ collapsed: !this.state.collapsed, animating: true });
+  };
+
+  handleTitleClick = () => {
+    this.props.onClick?.();
+  };
+
+  handleMoveLeft = () => {
+    this.props.onMove(-1);
+  };
+
+  handleMoveRight = () => {
+    this.props.onMove(1);
+  };
+
+  handleBackClick = () => {
+<<<<<<< HEAD:app/javascript/flavours/glitch/components/column_header.jsx
+    const { history } = this.props;
+
+    if (history.location?.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+=======
+    if (window.history && window.history.state) {
+      this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
+>>>>>>> 37a28ba20 (Do not leave Mastodon when clicking “Back” (#23953)):app/javascript/mastodon/components/column_header.js
+    }
+  };
+
+  handleTransitionEnd = () => {
+    this.setState({ animating: false });
+  };
+
+  handlePin = () => {
+    if (!this.props.pinned) {
+      this.props.history.replace('/');
+    }
+
+    this.props.onPin();
+  };
+
+  render () {
+    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
+    const { collapsed, animating } = this.state;
+
+    const wrapperClassName = classNames('column-header__wrapper', {
+      'active': active,
+    });
+
+    const buttonClassName = classNames('column-header', {
+      'active': active,
+    });
+
+    const collapsibleClassName = classNames('column-header__collapsible', {
+      'collapsed': collapsed,
+      'animating': animating,
+    });
+
+    const collapsibleButtonClassName = classNames('column-header__button', {
+      'active': !collapsed,
+    });
+
+    let extraContent, pinButton, moveButtons, backButton, collapseButton;
+
+    if (children) {
+      extraContent = (
+        <div key='extra-content' className='column-header__collapsible__extra'>
+          {children}
+        </div>
+      );
+    }
+
+    if (multiColumn && pinned) {
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+
+      moveButtons = (
+        <div key='move-buttons' className='column-header__setting-arrows'>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button>
+        </div>
+      );
+    } else if (multiColumn && this.props.onPin) {
+      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+    }
+
+    if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
+      backButton = (
+        <button onClick={this.handleBackClick} className='column-header__back-button'>
+          <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
+          <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+        </button>
+      );
+    }
+
+    const collapsedContent = [
+      extraContent,
+    ];
+
+    if (multiColumn) {
+      collapsedContent.push(pinButton);
+      collapsedContent.push(moveButtons);
+    }
+
+    if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
+      collapseButton = (
+        <button
+          className={collapsibleButtonClassName}
+          title={formatMessage(collapsed ? messages.show : messages.hide)}
+          aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
+          onClick={this.handleToggleClick}
+        >
+          <i className='icon-with-badge'>
+            <Icon id='sliders' />
+            {collapseIssues && <i className='icon-with-badge__issue-badge' />}
+          </i>
+        </button>
+      );
+    }
+
+    const hasTitle = icon && title;
+
+    const component = (
+      <div className={wrapperClassName}>
+        <h1 className={buttonClassName}>
+          {hasTitle && (
+            <button onClick={this.handleTitleClick}>
+              <Icon id={icon} fixedWidth className='column-header__icon' />
+              {title}
+            </button>
+          )}
+
+          {!hasTitle && backButton}
+
+          <div className='column-header__buttons'>
+            {hasTitle && backButton}
+            {extraButton}
+            {collapseButton}
+          </div>
+        </h1>
+
+        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
+          <div className='column-header__collapsible-inner'>
+            {(!collapsed || animating) && collapsedContent}
+          </div>
+        </div>
+
+        {appendContent}
+      </div>
+    );
+
+    if (multiColumn || placeholder) {
+      return component;
+    } else {
+      // The portal container and the component may be rendered to the DOM in
+      // the same React render pass, so the container might not be available at
+      // the time `render()` is called.
+      const container = document.getElementById('tabs-bar__portal');
+      if (container === null) {
+        // The container wasn't available, force a re-render so that the
+        // component can eventually be inserted in the container and not scroll
+        // with the rest of the area.
+        this.forceUpdate();
+        return component;
+      } else {
+        return createPortal(component, container);
+      }
+    }
+  }
+
+}
+
+export default injectIntl(withRouter(ColumnHeader));

app/javascript/flavours/glitch/features/ui/index.jsx.orig

@@ -0,0 +1,682 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+
+import classNames from 'classnames';
+import { Redirect, Route, withRouter } from 'react-router-dom';
+
+import { connect } from 'react-redux';
+
+import Favico from 'favico.js';
+import { debounce } from 'lodash';
+import { HotKeys } from 'react-hotkeys';
+
+import { changeLayout } from 'flavours/glitch/actions/app';
+import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
+import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
+import PermaLink from 'flavours/glitch/components/permalink';
+import PictureInPicture from 'flavours/glitch/features/picture_in_picture';
+import { layoutFromWindow } from 'flavours/glitch/is_mobile';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+
+import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
+import { clearHeight } from '../../actions/height_cache';
+import { expandNotifications, notificationsSetVisibility } from '../../actions/notifications';
+import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
+import { expandHomeTimeline } from '../../actions/timelines';
+import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding } from '../../initial_state';
+
+import BundleColumnError from './components/bundle_column_error';
+import Header from './components/header';
+import UploadArea from './components/upload_area';
+import ColumnsAreaContainer from './containers/columns_area_container';
+import LoadingBarContainer from './containers/loading_bar_container';
+import ModalContainer from './containers/modal_container';
+import NotificationsContainer from './containers/notifications_container';
+import {
+  Compose,
+  Status,
+  GettingStarted,
+  KeyboardShortcuts,
+  Firehose,
+  AccountTimeline,
+  AccountGallery,
+  HomeTimeline,
+  Followers,
+  Following,
+  Reblogs,
+  Favourites,
+  DirectTimeline,
+  HashtagTimeline,
+  Notifications,
+  FollowRequests,
+  FavouritedStatuses,
+  BookmarkedStatuses,
+  FollowedTags,
+  ListTimeline,
+  Blocks,
+  DomainBlocks,
+  Mutes,
+  PinnedStatuses,
+  Lists,
+  GettingStartedMisc,
+  Directory,
+  Explore,
+  Onboarding,
+  About,
+  PrivacyPolicy,
+} from './util/async-components';
+import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+
+// Dummy import, to make sure that <Status /> ends up in the application bundle.
+// Without this it ends up in ~8 very commonly used bundles.
+import '../../components/status';
+
+const messages = defineMessages({
+  beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
+});
+
+const mapStateToProps = state => ({
+  layout: state.getIn(['meta', 'layout']),
+  hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
+  hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
+  canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
+  isWide: state.getIn(['local_settings', 'stretch']),
+  dropdownMenuIsOpen: state.dropdownMenu.openId !== null,
+  unreadNotifications: state.getIn(['notifications', 'unread']),
+  showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
+  hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']),
+  moved: state.getIn(['accounts', me, 'moved']) && state.getIn(['accounts', state.getIn(['accounts', me, 'moved'])]),
+  firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
+  username: state.getIn(['accounts', me, 'username']),
+});
+
+const keyMap = {
+  help: '?',
+  new: 'n',
+  search: 's',
+  forceNew: 'option+n',
+  toggleComposeSpoilers: 'option+x',
+  focusColumn: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+  reply: 'r',
+  favourite: 'f',
+  boost: 'b',
+  mention: 'm',
+  open: ['enter', 'o'],
+  openProfile: 'p',
+  moveDown: ['down', 'j'],
+  moveUp: ['up', 'k'],
+  back: 'backspace',
+  goToHome: 'g h',
+  goToNotifications: 'g n',
+  goToLocal: 'g l',
+  goToFederated: 'g t',
+  goToDirect: 'g d',
+  goToStart: 'g s',
+  goToFavourites: 'g f',
+  goToPinned: 'g p',
+  goToProfile: 'g u',
+  goToBlocked: 'g b',
+  goToMuted: 'g m',
+  goToRequests: 'g r',
+  toggleHidden: 'x',
+  bookmark: 'd',
+  toggleCollapse: 'shift+x',
+  toggleSensitive: 'h',
+  openMedia: 'e',
+};
+
+class SwitchingColumnsArea extends PureComponent {
+
+  static contextTypes = {
+    identity: PropTypes.object,
+  };
+
+  static propTypes = {
+    children: PropTypes.node,
+    location: PropTypes.object,
+    singleColumn: PropTypes.bool,
+  };
+
+  UNSAFE_componentWillMount () {
+    if (this.props.singleColumn) {
+      document.body.classList.toggle('layout-single-column', true);
+      document.body.classList.toggle('layout-multiple-columns', false);
+    } else {
+      document.body.classList.toggle('layout-single-column', false);
+      document.body.classList.toggle('layout-multiple-columns', true);
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
+      this.node.handleChildrenContentChange();
+    }
+
+    if (prevProps.singleColumn !== this.props.singleColumn) {
+      document.body.classList.toggle('layout-single-column', this.props.singleColumn);
+      document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
+    }
+  }
+
+  setRef = c => {
+    if (c) {
+      this.node = c;
+    }
+  };
+
+  render () {
+    const { children, singleColumn } = this.props;
+    const { signedIn } = this.context.identity;
+    const pathName = this.props.location.pathname;
+
+    let redirect;
+
+    if (signedIn) {
+      if (singleColumn) {
+        redirect = <Redirect from='/' to='/home' exact />;
+      } else {
+        redirect = <Redirect from='/' to='/deck/getting-started' exact />;
+      }
+    } else if (singleUserMode && owner && initialState?.accounts[owner]) {
+      redirect = <Redirect from='/' to={`/@${initialState.accounts[owner].username}`} exact />;
+    } else if (trendsEnabled && trendsAsLanding) {
+      redirect = <Redirect from='/' to='/explore' exact />;
+    } else {
+      redirect = <Redirect from='/' to='/about' exact />;
+    }
+
+    return (
+      <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn}>
+        <WrappedSwitch>
+          {redirect}
+
+          {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
+          {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={pathName.slice(5)} /> : null}
+          {/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
+          {!singleColumn && pathName === '/getting-started' ? <Redirect from='/getting-started' to='/deck/getting-started' exact /> : null}
+          {!singleColumn && pathName === '/home' ? <Redirect from='/home' to='/deck/getting-started' exact /> : null}
+
+          <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
+          <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
+          <WrappedRoute path='/about' component={About} content={children} />
+          <WrappedRoute path='/privacy-policy' component={PrivacyPolicy} content={children} />
+
+          <WrappedRoute path={['/home', '/timelines/home']} component={HomeTimeline} content={children} />
+          <Redirect from='/timelines/public' to='/public' exact />
+          <Redirect from='/timelines/public/local' to='/public/local' exact />
+          <WrappedRoute path='/public' exact component={Firehose} componentParams={{ feedType: 'public' }} content={children} />
+          <WrappedRoute path='/public/local' exact component={Firehose} componentParams={{ feedType: 'community' }} content={children} />
+          <WrappedRoute path='/public/remote' exact component={Firehose} componentParams={{ feedType: 'public:remote' }} content={children} />
+          <WrappedRoute path={['/conversations', '/timelines/direct']} component={DirectTimeline} content={children} />
+          <WrappedRoute path='/tags/:id' component={HashtagTimeline} content={children} />
+          <WrappedRoute path='/lists/:id' component={ListTimeline} content={children} />
+          <WrappedRoute path='/notifications' component={Notifications} content={children} />
+          <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />
+
+          <WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
+          <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
+
+          <WrappedRoute path='/start' exact component={Onboarding} content={children} />
+          <WrappedRoute path='/directory' component={Directory} content={children} />
+          <WrappedRoute path={['/explore', '/search']} component={Explore} content={children} />
+          <WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
+
+          <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
+          <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
+          <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
+          <WrappedRoute path={['/accounts/:id/followers', '/users/:acct/followers', '/@:acct/followers']} component={Followers} content={children} />
+          <WrappedRoute path={['/accounts/:id/following', '/users/:acct/following', '/@:acct/following']} component={Following} content={children} />
+          <WrappedRoute path={['/@:acct/media', '/accounts/:id/media']} component={AccountGallery} content={children} />
+          <WrappedRoute path='/@:acct/:statusId' exact component={Status} content={children} />
+          <WrappedRoute path='/@:acct/:statusId/reblogs' component={Reblogs} content={children} />
+          <WrappedRoute path='/@:acct/:statusId/favourites' component={Favourites} content={children} />
+
+          {/* Legacy routes, cannot be easily factored with other routes because they share a param name */}
+          <WrappedRoute path='/timelines/tag/:id' component={HashtagTimeline} content={children} />
+          <WrappedRoute path='/timelines/list/:id' component={ListTimeline} content={children} />
+          <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
+          <WrappedRoute path='/statuses/:statusId/reblogs' component={Reblogs} content={children} />
+          <WrappedRoute path='/statuses/:statusId/favourites' component={Favourites} content={children} />
+
+          <WrappedRoute path='/follow_requests' component={FollowRequests} content={children} />
+          <WrappedRoute path='/blocks' component={Blocks} content={children} />
+          <WrappedRoute path='/domain_blocks' component={DomainBlocks} content={children} />
+          <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
+          <WrappedRoute path='/mutes' component={Mutes} content={children} />
+          <WrappedRoute path='/lists' component={Lists} content={children} />
+          <WrappedRoute path='/getting-started-misc' component={GettingStartedMisc} content={children} />
+
+          <Route component={BundleColumnError} />
+        </WrappedSwitch>
+      </ColumnsAreaContainer>
+    );
+  }
+
+}
+
+class UI extends PureComponent {
+
+  static contextTypes = {
+    identity: PropTypes.object.isRequired,
+  };
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    children: PropTypes.node,
+    isWide: PropTypes.bool,
+    systemFontUi: PropTypes.bool,
+    isComposing: PropTypes.bool,
+    hasComposingText: PropTypes.bool,
+    hasMediaAttachments: PropTypes.bool,
+    canUploadMore: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    dropdownMenuIsOpen: PropTypes.bool,
+    unreadNotifications: PropTypes.number,
+    showFaviconBadge: PropTypes.bool,
+    hicolorPrivacyIcons: PropTypes.bool,
+    moved: PropTypes.map,
+    layout: PropTypes.string.isRequired,
+    firstLaunch: PropTypes.bool,
+    username: PropTypes.string,
+    ...WithRouterPropTypes,
+  };
+
+  state = {
+    draggingOver: false,
+  };
+
+  handleBeforeUnload = e => {
+    const { intl, dispatch, hasComposingText, hasMediaAttachments } = this.props;
+
+    dispatch(synchronouslySubmitMarkers());
+
+    if (hasComposingText || hasMediaAttachments) {
+      // Setting returnValue to any string causes confirmation dialog.
+      // Many browsers no longer display this text to users,
+      // but we set user-friendly message for other browsers, e.g. Edge.
+      e.returnValue = intl.formatMessage(messages.beforeUnload);
+    }
+  };
+
+  handleVisibilityChange = () => {
+    const visibility = !document[this.visibilityHiddenProp];
+    this.props.dispatch(notificationsSetVisibility(visibility));
+    if (visibility) {
+      this.props.dispatch(submitMarkers({ immediate: true }));
+    }
+  };
+
+  handleDragEnter = (e) => {
+    e.preventDefault();
+
+    if (!this.dragTargets) {
+      this.dragTargets = [];
+    }
+
+    if (this.dragTargets.indexOf(e.target) === -1) {
+      this.dragTargets.push(e.target);
+    }
+
+    if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) {
+      this.setState({ draggingOver: true });
+    }
+  };
+
+  handleDragOver = (e) => {
+    if (this.dataTransferIsText(e.dataTransfer)) return false;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      e.dataTransfer.dropEffect = 'copy';
+    } catch (err) {
+
+    }
+
+    return false;
+  };
+
+  handleDrop = (e) => {
+    if (this.dataTransferIsText(e.dataTransfer)) return;
+
+    e.preventDefault();
+
+    this.setState({ draggingOver: false });
+    this.dragTargets = [];
+
+    if (e.dataTransfer && e.dataTransfer.files.length >= 1 && this.props.canUploadMore && this.context.identity.signedIn) {
+      this.props.dispatch(uploadCompose(e.dataTransfer.files));
+    }
+  };
+
+  handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el));
+
+    if (this.dragTargets.length > 0) {
+      return;
+    }
+
+    this.setState({ draggingOver: false });
+  };
+
+  dataTransferIsText = (dataTransfer) => {
+    return (dataTransfer && Array.from(dataTransfer.types).filter((type) => type === 'text/plain').length === 1);
+  };
+
+  closeUploadModal = () => {
+    this.setState({ draggingOver: false });
+  };
+
+  handleServiceWorkerPostMessage = ({ data }) => {
+    if (data.type === 'navigate') {
+      this.props.history.push(data.path);
+    } else {
+      console.warn('Unknown message type:', data.type);
+    }
+  };
+
+  handleLayoutChange = debounce(() => {
+    this.props.dispatch(clearHeight()); // The cached heights are no longer accurate, invalidate
+  }, 500, {
+    trailing: true,
+  });
+
+  handleResize = () => {
+    const layout = layoutFromWindow();
+
+    if (layout !== this.props.layout) {
+      this.handleLayoutChange.cancel();
+      this.props.dispatch(changeLayout({ layout }));
+    } else {
+      this.handleLayoutChange();
+    }
+  };
+
+  componentDidMount () {
+    const { signedIn } = this.context.identity;
+
+    window.addEventListener('beforeunload', this.handleBeforeUnload, false);
+    window.addEventListener('resize', this.handleResize, { passive: true });
+
+    document.addEventListener('dragenter', this.handleDragEnter, false);
+    document.addEventListener('dragover', this.handleDragOver, false);
+    document.addEventListener('drop', this.handleDrop, false);
+    document.addEventListener('dragleave', this.handleDragLeave, false);
+    document.addEventListener('dragend', this.handleDragEnd, false);
+
+    if ('serviceWorker' in  navigator) {
+      navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage);
+    }
+
+    this.favicon = new Favico({ animation:'none' });
+
+    if (signedIn) {
+      this.props.dispatch(fetchMarkers());
+      this.props.dispatch(expandHomeTimeline());
+      this.props.dispatch(expandNotifications());
+      this.props.dispatch(fetchServerTranslationLanguages());
+
+      setTimeout(() => this.props.dispatch(fetchServer()), 3000);
+    }
+
+    this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
+      return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
+    };
+
+    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
+      this.visibilityHiddenProp = 'hidden';
+      this.visibilityChange = 'visibilitychange';
+    } else if (typeof document.msHidden !== 'undefined') {
+      this.visibilityHiddenProp = 'msHidden';
+      this.visibilityChange = 'msvisibilitychange';
+    } else if (typeof document.webkitHidden !== 'undefined') {
+      this.visibilityHiddenProp = 'webkitHidden';
+      this.visibilityChange = 'webkitvisibilitychange';
+    }
+
+    if (this.visibilityChange !== undefined) {
+      document.addEventListener(this.visibilityChange, this.handleVisibilityChange, false);
+      this.handleVisibilityChange();
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.unreadNotifications !== prevProps.unreadNotifications ||
+        this.props.showFaviconBadge !== prevProps.showFaviconBadge) {
+      if (this.favicon) {
+        try {
+          this.favicon.badge(this.props.showFaviconBadge ? this.props.unreadNotifications : 0);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.visibilityChange !== undefined) {
+      document.removeEventListener(this.visibilityChange, this.handleVisibilityChange);
+    }
+
+    window.removeEventListener('beforeunload', this.handleBeforeUnload);
+    window.removeEventListener('resize', this.handleResize);
+
+    document.removeEventListener('dragenter', this.handleDragEnter);
+    document.removeEventListener('dragover', this.handleDragOver);
+    document.removeEventListener('drop', this.handleDrop);
+    document.removeEventListener('dragleave', this.handleDragLeave);
+    document.removeEventListener('dragend', this.handleDragEnd);
+  }
+
+  setRef = c => {
+    this.node = c;
+  };
+
+  handleHotkeyNew = e => {
+    e.preventDefault();
+
+    const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea');
+
+    if (element) {
+      element.focus();
+    }
+  };
+
+  handleHotkeySearch = e => {
+    e.preventDefault();
+
+    const element = this.node.querySelector('.search__input');
+
+    if (element) {
+      element.focus();
+    }
+  };
+
+  handleHotkeyForceNew = e => {
+    this.handleHotkeyNew(e);
+    this.props.dispatch(resetCompose());
+  };
+
+  handleHotkeyToggleComposeSpoilers = e => {
+    e.preventDefault();
+    this.props.dispatch(changeComposeSpoilerness());
+  };
+
+  handleHotkeyFocusColumn = e => {
+    const index  = (e.key * 1) + 1; // First child is drawer, skip that
+    const column = this.node.querySelector(`.column:nth-child(${index})`);
+    if (!column) return;
+    const container = column.querySelector('.scrollable');
+
+    if (container) {
+      const status = container.querySelector('.focusable');
+
+      if (status) {
+        if (container.scrollTop > status.offsetTop) {
+          status.scrollIntoView(true);
+        }
+        status.focus();
+      }
+    }
+  };
+
+  handleHotkeyBack = () => {
+<<<<<<< HEAD:app/javascript/flavours/glitch/features/ui/index.jsx
+    const { history } = this.props;
+
+    if (history.location?.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+=======
+    if (window.history && window.history.state) {
+      this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
+>>>>>>> 37a28ba20 (Do not leave Mastodon when clicking “Back” (#23953)):app/javascript/mastodon/features/ui/index.js
+    }
+  };
+
+  setHotkeysRef = c => {
+    this.hotkeys = c;
+  };
+
+  handleHotkeyToggleHelp = () => {
+    if (this.props.location.pathname === '/keyboard-shortcuts') {
+      this.props.history.goBack();
+    } else {
+      this.props.history.push('/keyboard-shortcuts');
+    }
+  };
+
+  handleHotkeyGoToHome = () => {
+    this.props.history.push('/home');
+  };
+
+  handleHotkeyGoToNotifications = () => {
+    this.props.history.push('/notifications');
+  };
+
+  handleHotkeyGoToLocal = () => {
+    this.props.history.push('/public/local');
+  };
+
+  handleHotkeyGoToFederated = () => {
+    this.props.history.push('/public');
+  };
+
+  handleHotkeyGoToDirect = () => {
+    this.props.history.push('/conversations');
+  };
+
+  handleHotkeyGoToStart = () => {
+    this.props.history.push('/getting-started');
+  };
+
+  handleHotkeyGoToFavourites = () => {
+    this.props.history.push('/favourites');
+  };
+
+  handleHotkeyGoToPinned = () => {
+    this.props.history.push('/pinned');
+  };
+
+  handleHotkeyGoToProfile = () => {
+    this.props.history.push(`/@${this.props.username}`);
+  };
+
+  handleHotkeyGoToBlocked = () => {
+    this.props.history.push('/blocks');
+  };
+
+  handleHotkeyGoToMuted = () => {
+    this.props.history.push('/mutes');
+  };
+
+  handleHotkeyGoToRequests = () => {
+    this.props.history.push('/follow_requests');
+  };
+
+  render () {
+    const { draggingOver } = this.state;
+    const { children, isWide, location, dropdownMenuIsOpen, layout, moved } = this.props;
+
+    const columnsClass = layout => {
+      switch (layout) {
+      case 'single':
+        return 'single-column';
+      case 'multiple':
+        return 'multi-columns';
+      default:
+        return 'auto-columns';
+      }
+    };
+
+    const className = classNames('ui', columnsClass(layout), {
+      'wide': isWide,
+      'system-font': this.props.systemFontUi,
+      'hicolor-privacy-icons': this.props.hicolorPrivacyIcons,
+    });
+
+    const handlers = {
+      help: this.handleHotkeyToggleHelp,
+      new: this.handleHotkeyNew,
+      search: this.handleHotkeySearch,
+      forceNew: this.handleHotkeyForceNew,
+      toggleComposeSpoilers: this.handleHotkeyToggleComposeSpoilers,
+      focusColumn: this.handleHotkeyFocusColumn,
+      back: this.handleHotkeyBack,
+      goToHome: this.handleHotkeyGoToHome,
+      goToNotifications: this.handleHotkeyGoToNotifications,
+      goToLocal: this.handleHotkeyGoToLocal,
+      goToFederated: this.handleHotkeyGoToFederated,
+      goToDirect: this.handleHotkeyGoToDirect,
+      goToStart: this.handleHotkeyGoToStart,
+      goToFavourites: this.handleHotkeyGoToFavourites,
+      goToPinned: this.handleHotkeyGoToPinned,
+      goToProfile: this.handleHotkeyGoToProfile,
+      goToBlocked: this.handleHotkeyGoToBlocked,
+      goToMuted: this.handleHotkeyGoToMuted,
+      goToRequests: this.handleHotkeyGoToRequests,
+    };
+
+    return (
+      <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
+        <div className={className} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
+          {moved && (<div className='flash-message alert'>
+            <FormattedMessage
+              id='moved_to_warning'
+              defaultMessage='This account is marked as moved to {moved_to_link}, and may thus not accept new follows.'
+              values={{ moved_to_link: (
+                <PermaLink href={moved.get('url')} to={`/@${moved.get('acct')}`}>
+                  @{moved.get('acct')}
+                </PermaLink>
+              ) }}
+            />
+          </div>)}
+
+          <Header />
+
+          <SwitchingColumnsArea location={location} singleColumn={layout === 'mobile' || layout === 'single-column'}>
+            {children}
+          </SwitchingColumnsArea>
+
+          {layout !== 'mobile' && <PictureInPicture />}
+          <NotificationsContainer />
+          <LoadingBarContainer className='loading-bar' />
+          <ModalContainer />
+          <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps)(injectIntl(withRouter(UI)));

app/javascript/flavours/glitch/styles/modern/diff.css

@@ -1,154 +1,96 @@
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .compose-form__autosuggest-wrapper
-  > :last-child {
+body.app-body.flavour-modern-glitch > #mastodon .compose-form__autosuggest-wrapper > :last-child {
   padding-bottom: 2em !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons {
   width: 100%;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .compose-form__buttons
-  > div:last-child {
+body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons > div:last-child {
   margin-inline-start: auto;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .compose-form__buttons-wrapper {
   position: relative;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .character-counter__wrapper {
   position: absolute;
   inset-inline-end: 0;
   bottom: 100%;
-  margin: 4px;
+  margin: 4px 4px;
   border-radius: 6px;
   padding: 0.1em 0.5em;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .character-counter__wrapper
-  span {
+body.app-body.flavour-modern-glitch > #mastodon .character-counter__wrapper span {
   font-size: 0.9em;
   font-weight: 500;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content {
   height: auto !important;
   overflow: visible;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .collapsed
-  .status__content
-  .status__content__text {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content .status__content__text {
   mask: linear-gradient(to bottom, #000 50px, transparent) !important;
   -webkit-mask: linear-gradient(to bottom, #000 50px, transparent) !important;
   max-height: 100px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .collapsed
-  .status__content
-  p:not(:last-child) {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content p:not(:last-child) {
   margin-bottom: 0.4em;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content br {
   display: block;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .collapsed
-  .status__content::after {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__content::after {
   content: unset;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .collapsed.muted
-  .status__content__text
-  ~ * {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .status__action-bar :not(i),
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .detailed-status__action-bar :not(i),
+body.app-body.flavour-modern-glitch > #mastodon .collapsed .picture-in-picture__footer :not(i) {
+  height: unset !important;
+  width: unset !important;
+}
+body.app-body.flavour-modern-glitch > #mastodon .collapsed.muted .status__content__text ~ * {
   display: none;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status:not(.status-direct)
-  > .status__content {
+body.app-body.flavour-modern-glitch > #mastodon .status:not(.status-direct) > .status__content {
   margin-block: -90px -100px !important;
   padding-block: 100px !important;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status:not(.status-direct)
-  > .status__content
-  .status__content__text {
-  margin-top: 0;
+body.app-body.flavour-modern-glitch > #mastodon .status:not(.status-direct) > .status__content .status__content__text {
+  margin-top: 0px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status:not(.status-direct)
-  > .status__content
-  > :last-child:not(.status__content__text) {
+body.app-body.flavour-modern-glitch > #mastodon .status:not(.status-direct) > .status__content > :last-child:not(.status__content__text) {
   margin-bottom: 5px !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status .full-width {
   margin-inline: 0 !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status .status__action-bar {
   position: static;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__info
-  .notification__message {
+body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message {
   padding-top: 0 !important;
   padding-inline-start: 0 !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status__display-name {
   line-height: 22px;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .display-name__account {
   font-size: 15px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .media-gallery__item
-  > .media-gallery__preview {
+body.app-body.flavour-modern-glitch > #mastodon .media-gallery__item > .media-gallery__preview {
   display: unset;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status__action-bar-spacer {
   min-width: 5px;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status__relative-time {
   margin-inline: auto 5px !important;
   z-index: 2;
   flex-grow: 0 !important;
+  min-width: 5ch !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .reactions-bar {
   width: unset;
   margin-top: 8px;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
   border-radius: 6px !important;
   padding-block: 2px;
@@ -157,129 +99,87 @@ body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
   body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button {
     padding: 4px 8px !important;
   }
-
-  body.app-body.flavour-modern-glitch
-    > #mastodon
-    .reactions-bar
-    button
-    .reactions-bar__item__emoji {
+  body.app-body.flavour-modern-glitch > #mastodon .reactions-bar button .reactions-bar__item__emoji {
     height: 18px;
     width: 18px;
   }
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .reactions-bar:empty {
   display: none;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .collapsed
-  > .status__info
-  .notification__message {
+body.app-body.flavour-modern-glitch > #mastodon .collapsed > .status__info .notification__message {
   padding-bottom: 0 !important;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .notification
-  > .notification__message {
+body.app-body.flavour-modern-glitch > #mastodon .notification > .notification__message {
   padding-inline: 15px !important;
   padding-top: 18px !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .notification .account {
   padding-inline-start: 0 !important;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .notification__favourite-icon-wrapper {
+body.app-body.flavour-modern-glitch > #mastodon .notification__favourite-icon-wrapper {
   position: static;
   margin-inline-end: 10px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .notification__favourite-icon-wrapper
-  i {
+body.app-body.flavour-modern-glitch > #mastodon .notification__favourite-icon-wrapper i {
   width: 1.28571429em !important;
   text-align: center;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .status__prepend,
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__info
-  .notification__message {
+body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message {
   padding-bottom: 15px !important;
   padding-top: 0 !important;
   margin-top: -5px !important;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__prepend
-  .status__prepend-icon-wrapper,
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__info
-  .notification__message
-  .status__prepend-icon-wrapper {
+body.app-body.flavour-modern-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper,
+body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper {
   all: unset;
   margin-inline-end: 10px;
   display: flex;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__prepend
-  .status__prepend-icon-wrapper
-  i,
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .status__info
-  .notification__message
-  .status__prepend-icon-wrapper
-  i {
+body.app-body.flavour-modern-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper i,
+body.app-body.flavour-modern-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper i {
   margin: auto;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .detailed-status__wrapper
-  .focusable:not(.status)::before {
+body.app-body.flavour-modern-glitch > #mastodon .detailed-status__wrapper .focusable:not(.status)::before {
   content: unset !important;
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .setting-text {
   border-radius: 0 !important;
   margin: 4px;
   width: calc(100% - 8px);
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .column-settings__pillbar {
   border-radius: var(--radius);
 }
-
 body.app-body.flavour-modern-glitch > #mastodon .pillbar-button {
   border-radius: 0 !important;
   padding: 6px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .account-card
-  .media-modal__close {
+body.app-body.flavour-modern-glitch > #mastodon .account__header__account-note {
+  margin-block: 10px 0;
+}
+body.app-body.flavour-modern-glitch > #mastodon .account__header__account-note:focus-within {
+  border-radius: var(--radius) !important;
+}
+body.app-body.flavour-modern-glitch > #mastodon .account__header__account-note__header {
+  align-items: center;
+}
+body.app-body.flavour-modern-glitch > #mastodon .account__header__account-note__header button {
+  display: flex;
+  gap: 0.2em;
+}
+body.app-body.flavour-modern-glitch > #mastodon .account__header__account-note__content {
+  width: 100%;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+body.app-body.flavour-modern-glitch > #mastodon .account-card .media-modal__close {
   left: 10px;
   top: 10px;
 }
-
-body.app-body.flavour-modern-glitch
-  > #mastodon
-  .account-card
-  .media-modal__close::before {
-  content: '';
+body.app-body.flavour-modern-glitch > #mastodon .account-card .media-modal__close::before {
+  content: "";
   position: absolute;
   inset: -60px -30px;
   background: linear-gradient(to right, #000, transparent);
@@ -287,7 +187,6 @@ body.app-body.flavour-modern-glitch
   z-index: -1;
   opacity: 0.5;
 }
-
 .layout-multiple-columns.flavour-modern-glitch .drawer__inner {
   margin-top: -10px;
   padding-top: 30px !important;