4.2.5 kt changes

.github/workflows/build-container-image.yml

@@ -59,13 +59,6 @@ jobs:
           BUILDER_NODE_1_AUTH_TLS_CERT: ${{ secrets.DOCKER_BUILDER_HETZNER_ARM64_01_CERT }}
           BUILDER_NODE_1_AUTH_TLS_KEY: ${{ secrets.DOCKER_BUILDER_HETZNER_ARM64_01_KEY }}
 
-      - name: Log in to Docker Hub
-        if: contains(inputs.push_to_images, 'tootsuite')
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
       - name: Log in to the Github Container registry
         if: contains(inputs.push_to_images, 'ghcr.io')
         uses: docker/login-action@v2

.github/workflows/build-releases.yml

@@ -12,11 +12,10 @@ jobs:
   build-image:
     uses: ./.github/workflows/build-container-image.yml
     with:
-      platforms: linux/amd64,linux/arm64
-      use_native_arm64_builder: true
+      platforms: linux/arm64
+      use_native_arm64_builder: false
       push_to_images: |
-        tootsuite/mastodon
-        ghcr.io/mastodon/mastodon
+        ghcr.io/k-t-corp/mastodon
       # Do not use cache when building releases, so apt update is always ran and the release always contain the latest packages
       cache: false
       # Only tag with latest when ran against the latest stable branch

app/javascript/mastodon/actions/compose.js

@@ -278,7 +278,7 @@ export function submitComposeFail(error) {
 
 export function uploadCompose(files) {
   return function (dispatch, getState) {
-    const uploadLimit = 4;
+    const uploadLimit = 16;
     const media = getState().getIn(['compose', 'media_attachments']);
     const pending = getState().getIn(['compose', 'pending_media_attachments']);
     const progress = new Array(files.length).fill(0);
@@ -298,7 +298,7 @@ export function uploadCompose(files) {
     dispatch(uploadComposeRequest());
 
     for (const [i, file] of Array.from(files).entries()) {
-      if (media.size + i > 3) break;
+      if (media.size + i > 15) break;
 
       const data = new FormData();
       data.append('file', file);

app/javascript/mastodon/components/avatar_composite.jsx

@@ -33,7 +33,7 @@ export default class AvatarComposite extends PureComponent {
       width = 100;
     }
 
-    if (size === 4 || (size === 3 && index > 0)) {
+    if (size >= 4 || (size === 3 && index > 0)) {
       height = 50;
     }
 
@@ -55,12 +55,12 @@ export default class AvatarComposite extends PureComponent {
       } else if (index > 1) {
         top = '1px';
       }
-    } else if (size === 4) {
-      if (index === 0 || index === 2) {
+    } else if (size >= 4) {
+      if (index % 2 === 0) {
         right = '1px';
       }
 
-      if (index === 1 || index === 3) {
+      if (index % 2 === 1) {
         left = '1px';
       }
 

app/javascript/mastodon/components/media_gallery.jsx

@@ -97,7 +97,7 @@ class Item extends PureComponent {
       width = 100;
     }
 
-    if (size === 4 || (size === 3 && index > 0)) {
+    if (size >= 4 || (size === 3 && index > 0)) {
       height = 50;
     }
 
@@ -304,13 +304,13 @@ class MediaGallery extends PureComponent {
       style.aspectRatio = '3 / 2';
     }
 
-    const size     = media.take(4).size;
+    const size     = media.take(16).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 
     if (this.isFullSizeEligible()) {
       children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
     } else {
-      children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
+      children = media.take(16).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
     }
 
     if (uncached) {

app/javascript/mastodon/components/status_content.jsx

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { Icon }  from 'mastodon/components/icon';
 import PollContainer from 'mastodon/containers/poll_container';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
+import parseGPlusFormatting from 'mastodon/utils/parse_g_plus_formatting'
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
 
@@ -21,7 +22,7 @@ const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
  * @returns {string}
  */
 export function getStatusContent(status) {
-  return status.getIn(['translation', 'contentHtml']) || status.get('contentHtml');
+  return parseGPlusFormatting(status.getIn(['translation', 'contentHtml'])) || parseGPlusFormatting(status.get('contentHtml'));
 }
 
 class TranslateButton extends PureComponent {
@@ -244,7 +245,7 @@ class StatusContent extends PureComponent {
     const renderTranslate = this.props.onTranslate && this.context.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
     const content = { __html: statusContent ?? getStatusContent(status) };
-    const spoilerContent = { __html: status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml') };
+    const spoilerContent = { __html: parseGPlusFormatting(status.getIn(['translation', 'spoilerHtml'])) || parseGPlusFormatting(status.get('spoilerHtml')) };
     const language = status.getIn(['translation', 'language']) || status.get('language');
     const classNames = classnames('status__content', {
       'status__content--with-action': this.props.onClick && this.context.router,

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

@@ -100,7 +100,7 @@ class ComposeForm extends ImmutablePureComponent {
     const fulltext = this.getFulltextForCharacterCounting();
     const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
 
-    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia));
+    return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 5000 || (isOnlyWhitespace && !anyMedia));
   };
 
   handleSubmit = (e) => {
@@ -297,7 +297,7 @@ class ComposeForm extends ImmutablePureComponent {
             </div>
 
             <div className='character-counter__wrapper'>
-              <CharacterCounter max={500} text={this.getFulltextForCharacterCounting()} />
+              <CharacterCounter max={5000} text={this.getFulltextForCharacterCounting()} />
             </div>
           </div>
         </div>

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

@@ -164,7 +164,7 @@ class PollForm extends ImmutablePureComponent {
         </ul>
 
         <div className='poll__footer'>
-          <button type='button' disabled={options.size >= 4} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
+          <button type='button' disabled={options.size >= 9} className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
 
           {/* eslint-disable-next-line jsx-a11y/no-onchange */}
           <select value={expiresIn} onChange={this.handleSelectDuration}>

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

@@ -6,11 +6,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AttachmentList from 'mastodon/components/attachment_list';
+import parseGPlusFormatting from 'mastodon/utils/parse_g_plus_formatting'
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';
 import { IconButton } from '../../../components/icon_button';
 
+
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
 });
@@ -45,7 +47,7 @@ class ReplyIndicator extends ImmutablePureComponent {
       return null;
     }
 
-    const content = { __html: status.get('contentHtml') };
+    const content = { __html: parseGPlusFormatting(status.get('contentHtml')) };
 
     return (
       <div className='reply-indicator'>

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

@@ -4,7 +4,7 @@ import { uploadCompose } from '../../../actions/compose';
 import UploadButton from '../components/upload_button';
 
 const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 15 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
   unavailable: state.getIn(['compose', 'poll']) !== null,
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });

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

@@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { supportsPassiveEvents } from 'detect-passive-events';
 
+import { shouldShowNavPanel } from '../../../is_mobile';
 import { scrollRight } from '../../../scroll';
 import BundleContainer from '../containers/bundle_container';
 import {
@@ -54,6 +55,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
     isModalOpen: PropTypes.bool.isRequired,
     singleColumn: PropTypes.bool,
     children: PropTypes.node,
+    isNavPanelOpen: PropTypes.bool.isRequired
   };
 
   // Corresponds to (max-width: $no-gap-breakpoint + 285px - 1px) in SCSS
@@ -138,9 +140,17 @@ export default class ColumnsArea extends ImmutablePureComponent {
   };
 
   render () {
-    const { columns, children, singleColumn, isModalOpen } = this.props;
+    const { columns, children, singleColumn, isModalOpen, isNavPanelOpen } = this.props;
     const { renderComposePanel } = this.state;
 
+    let mainPanelsAdditionalStyle;
+    const showNavPanel = shouldShowNavPanel() || isNavPanelOpen;
+    if (showNavPanel) {
+      mainPanelsAdditionalStyle = {};
+    } else {
+      mainPanelsAdditionalStyle = { width: '100%' };
+    }
+
     if (singleColumn) {
       return (
         <div className='columns-area__panels'>
@@ -150,16 +160,18 @@ export default class ColumnsArea extends ImmutablePureComponent {
             </div>
           </div>
 
-          <div className='columns-area__panels__main'>
+          <div className='columns-area__panels__main' style={mainPanelsAdditionalStyle}>
             <div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div>
             <div className='columns-area columns-area--mobile'>{children}</div>
           </div>
 
-          <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
-            <div className='columns-area__panels__pane__inner'>
-              <NavigationPanel />
+          {showNavPanel &&
+            <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
+              <div className='columns-area__panels__pane__inner'>
+                <NavigationPanel />
+              </div>
             </div>
-          </div>
+          }
         </div>
       );
     }

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

@@ -14,6 +14,8 @@ import { Icon } from 'mastodon/components/icon';
 import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
 import { registrationsOpen, me, sso_redirect } from 'mastodon/initial_state';
 
+import { shouldShowNavPanel } from '../../../is_mobile';
+
 const Account = connect(state => ({
   account: state.getIn(['accounts', me]),
 }))(({ account }) => (
@@ -22,6 +24,19 @@ const Account = connect(state => ({
   </Link>
 ));
 
+const navPanelToggle = (isNavPanelOpen, toggleNavPanel) => {
+  if (shouldShowNavPanel()) {
+    return null;
+  }
+  return (
+    <div style={{ width: '32px' }} onClick={toggleNavPanel} onKeyPress={toggleNavPanel} role='button' tabIndex={0}>
+      <div style={{ width: '50%', margin: '0 auto' }}>
+        {isNavPanelOpen ? <i className='fa fa-times' /> : <i className='fa fa-bars' />}
+      </div>
+    </div>
+  );
+};
+
 const messages = defineMessages({
   search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
 });
@@ -51,6 +66,8 @@ class Header extends PureComponent {
     signupUrl: PropTypes.string.isRequired,
     dispatchServer: PropTypes.func,
     intl: PropTypes.object.isRequired,
+    isNavPanelOpen: PropTypes.bool.isRequired,
+    toggleNavPanel: PropTypes.func.isRequired,
   };
 
   componentDidMount () {
@@ -60,7 +77,7 @@ class Header extends PureComponent {
 
   render () {
     const { signedIn } = this.context.identity;
-    const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props;
+    const { location, openClosedRegistrationsModal, signupUrl, intl, isNavPanelOpen, toggleNavPanel } = this.props;
 
     let content;
 
@@ -113,6 +130,7 @@ class Header extends PureComponent {
 
         <div className='ui__header__links'>
           {content}
+          {navPanelToggle(isNavPanelOpen, toggleNavPanel)}
         </div>
       </div>
     );

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

@@ -127,6 +127,7 @@ class SwitchingColumnsArea extends PureComponent {
     children: PropTypes.node,
     location: PropTypes.object,
     singleColumn: PropTypes.bool,
+    isNavPanelOpen: PropTypes.bool.isRequired,
   };
 
   UNSAFE_componentWillMount () {
@@ -157,7 +158,7 @@ class SwitchingColumnsArea extends PureComponent {
   };
 
   render () {
-    const { children, singleColumn } = this.props;
+    const { children, singleColumn, isNavPanelOpen } = this.props;
     const { signedIn } = this.context.identity;
     const pathName = this.props.location.pathname;
 
@@ -178,7 +179,7 @@ class SwitchingColumnsArea extends PureComponent {
     }
 
     return (
-      <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn}>
+      <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn} isNavPanelOpen={isNavPanelOpen}>
         <WrappedSwitch>
           {redirect}
 
@@ -267,6 +268,7 @@ class UI extends PureComponent {
 
   state = {
     draggingOver: false,
+    isNavPanelOpen: false,
   };
 
   handleBeforeUnload = e => {
@@ -283,6 +285,10 @@ class UI extends PureComponent {
     }
   };
 
+  handleToggleNavPanel = () => {
+    this.setState({ isNavPanelOpen: !this.state.isNavPanelOpen });
+  };
+
   handleWindowFocus = () => {
     this.props.dispatch(focusApp());
     this.props.dispatch(submitMarkers({ immediate: true }));
@@ -550,7 +556,7 @@ class UI extends PureComponent {
   };
 
   render () {
-    const { draggingOver } = this.state;
+    const { draggingOver, isNavPanelOpen } = this.state;
     const { children, isComposing, location, dropdownMenuIsOpen, layout } = this.props;
 
     const handlers = {
@@ -573,14 +579,15 @@ class UI extends PureComponent {
       goToBlocked: this.handleHotkeyGoToBlocked,
       goToMuted: this.handleHotkeyGoToMuted,
       goToRequests: this.handleHotkeyGoToRequests,
+      handleToggleNavPanel: this.handleToggleNavPanel
     };
 
     return (
       <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
         <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
-          <Header />
+          <Header isNavPanelOpen={isNavPanelOpen} toggleNavPanel={this.handleToggleNavPanel} />
 
-          <SwitchingColumnsArea location={location} singleColumn={layout === 'mobile' || layout === 'single-column'}>
+          <SwitchingColumnsArea location={location} singleColumn={layout === 'mobile' || layout === 'single-column'} isNavPanelOpen={isNavPanelOpen}>
             {children}
           </SwitchingColumnsArea>
 

app/javascript/mastodon/is_mobile.ts

@@ -32,3 +32,7 @@ const touchListener = () => {
 window.addEventListener('touchstart', touchListener, listenerOptions);
 
 export const isUserTouching = () => userTouching;
+
+export const shouldShowNavPanel = (): boolean => {
+  return layoutFromWindow() !== 'mobile';
+};