Replace glitch-soc's collapsed toots with upstream's “Read more” (#2916)

* Remove glitch-soc's post collapse feature

* Get rid of the infamous `parseClick`

* Remove unused CSS

* Use upstream's “Read More” implementation

* Update translation strings

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -63,19 +63,6 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
   const sharedCWState = useSelector(state => state.getIn(['state', 'content_warnings', 'shared_state']));
   const [expanded, setExpanded] = useState(undefined);
 
-  const parseClick = useCallback((e, destination) => {
-    if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) {
-      if (destination === undefined) {
-        if (unread) {
-          dispatch(markConversationRead(id));
-        }
-        destination = `/statuses/${lastStatus.get('id')}`;
-      }
-      history.push(destination);
-      e.preventDefault();
-    }
-  }, [dispatch, history, unread, id, lastStatus]);
-
   const handleMouseEnter = useCallback(({ currentTarget }) => {
     if (autoPlayGif) {
       return;
@@ -215,7 +202,7 @@ export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown })
 
           <StatusContent
             status={lastStatus}
-            parseClick={parseClick}
+            onClick={handleClick}
             expanded={sharedCWState ? lastStatus.get('hidden') : expanded}
             onExpandedToggle={handleShowMore}
             collapsible

app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx

@@ -5,7 +5,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { Helmet } from 'react-helmet';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
 
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
 import Column from 'flavours/glitch/components/column';
@@ -15,20 +14,15 @@ const messages = defineMessages({
   heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
 });
 
-const mapStateToProps = state => ({
-  collapseEnabled: state.getIn(['local_settings', 'collapsed', 'enabled']),
-});
-
 class KeyboardShortcuts extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     multiColumn: PropTypes.bool,
-    collapseEnabled: PropTypes.bool,
   };
 
   render () {
-    const { intl, collapseEnabled, multiColumn } = this.props;
+    const { intl, multiColumn } = this.props;
 
     return (
       <Column>
@@ -88,12 +82,6 @@ class KeyboardShortcuts extends ImmutablePureComponent {
                 <td><kbd>h</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
               </tr>
-              {collapseEnabled && (
-                <tr>
-                  <td><kbd>shift</kbd>+<kbd>x</kbd></td>
-                  <td><FormattedMessage id='keyboard_shortcuts.toggle_collapse' defaultMessage='to collapse/uncollapse toots' /></td>
-                </tr>
-              )}
               <tr>
                 <td><kbd>up</kbd>, <kbd>k</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
@@ -134,6 +122,54 @@ class KeyboardShortcuts extends ImmutablePureComponent {
                 <td><kbd>esc</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
               </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>h</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>n</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>l</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.local' defaultMessage='to open local timeline' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>t</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.federated' defaultMessage='to open federated timeline' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>d</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.direct' defaultMessage='to open direct messages column' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>s</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.start' defaultMessage='to open "get started" column' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>f</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open favorites list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>p</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>u</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>b</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>m</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
+              </tr>
+              <tr>
+                <td><kbd>g</kbd>+<kbd>r</kbd></td>
+                <td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
+              </tr>
               <tr>
                 <td><kbd>?</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
@@ -151,4 +187,4 @@ class KeyboardShortcuts extends ImmutablePureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(KeyboardShortcuts));
+export default injectIntl(KeyboardShortcuts);

app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx

@@ -6,7 +6,6 @@ import { injectIntl, defineMessages } from 'react-intl';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
-import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react';
 import ImageIcon from '@/material-icons/400-24px/image.svg?react';
 import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
@@ -19,7 +18,6 @@ const messages = defineMessages({
   general: {  id: 'settings.general', defaultMessage: 'General' },
   compose: {  id: 'settings.compose_box_opts', defaultMessage: 'Compose box' },
   content_warnings: { id: 'settings.content_warnings', defaultMessage: 'Content Warnings' },
-  collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' },
   media: { id: 'settings.media', defaultMessage: 'Media' },
   preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' },
   close: { id: 'settings.close', defaultMessage: 'Close' },
@@ -64,14 +62,6 @@ class LocalSettingsNavigation extends PureComponent {
           iconComponent={WarningIcon}
           title={intl.formatMessage(messages.content_warnings)}
         />
-        <LocalSettingsNavigationItem
-          active={index === 3}
-          index={3}
-          onNavigate={onNavigate}
-          icon='angle-double-up'
-          iconComponent={ExpandLessIcon}
-          title={intl.formatMessage(messages.collapsed)}
-        />
         <LocalSettingsNavigationItem
           active={index === 4}
           index={4}

app/javascript/flavours/glitch/features/local_settings/page/index.jsx

@@ -320,103 +320,6 @@ class LocalSettingsPage extends PureComponent {
         </section>
       </div>
     ),
-    ({ onChange, settings }) => (
-      <div className='glitch local-settings__page collapsed'>
-        <h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
-        <LocalSettingsPageItem
-          settings={settings}
-          item={['collapsed', 'enabled']}
-          id='mastodon-settings--collapsed-enabled'
-          onChange={onChange}
-        >
-          <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' />
-          <span className='hint'><FormattedMessage id='settings.enable_collapsed_hint' defaultMessage='Collapsed posts have parts of their contents hidden to take up less screen space. This is distinct from the Content Warning feature' /></span>
-        </LocalSettingsPageItem>
-        <LocalSettingsPageItem
-          settings={settings}
-          item={['collapsed', 'show_action_bar']}
-          id='mastodon-settings--collapsed-show-action-bar'
-          onChange={onChange}
-          dependsOn={[['collapsed', 'enabled']]}
-        >
-          <FormattedMessage id='settings.show_action_bar' defaultMessage='Show action buttons in collapsed toots' />
-        </LocalSettingsPageItem>
-        <section>
-          <h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'all']}
-            id='mastodon-settings--collapsed-auto-all'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'notifications']}
-            id='mastodon-settings--collapsed-auto-notifications'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'lengthy']}
-            id='mastodon-settings--collapsed-auto-lengthy'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'reblogs']}
-            id='mastodon-settings--collapsed-auto-reblogs'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_reblogs' defaultMessage='Boosts' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'replies']}
-            id='mastodon-settings--collapsed-auto-replies'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'media']}
-            id='mastodon-settings--collapsed-auto-media'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-          >
-            <FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'auto', 'height']}
-            id='mastodon-settings--collapsed-auto-height'
-            placeholder='400'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-            dependsOnNot={[['collapsed', 'auto', 'all']]}
-            inputProps={{ type: 'number', min: '200', max: '999' }}
-          >
-            <FormattedMessage id='settings.auto_collapse_height' defaultMessage='Height (in pixels) for a toot to be considered lengthy' />
-          </LocalSettingsPageItem>
-        </section>
-      </div>
-    ),
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page media'>
         <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>

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

@@ -19,7 +19,6 @@ import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
 import { IconLogo } from 'flavours/glitch/components/logo';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
-import { useAppHistory } from 'flavours/glitch/components/router';
 import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
 import PollContainer from 'flavours/glitch/containers/poll_container';
 import { useAppSelector } from 'flavours/glitch/store';
@@ -75,7 +74,6 @@ export const DetailedStatus: React.FC<{
   const properStatus = status?.get('reblog') ?? status;
   const [height, setHeight] = useState(0);
   const nodeRef = useRef<HTMLDivElement>();
-  const history = useAppHistory();
 
   const rewriteMentions = useAppSelector(
     (state) => state.local_settings.get('rewrite_mentions', false) as boolean,
@@ -142,18 +140,6 @@ export const DetailedStatus: React.FC<{
     if (onTranslate) onTranslate(status);
   }, [onTranslate, status]);
 
-  const parseClick = useCallback(
-    (e: React.MouseEvent, destination: string) => {
-      if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) {
-        e.preventDefault();
-        history.push(destination);
-      }
-
-      e.stopPropagation();
-    },
-    [history],
-  );
-
   if (!properStatus) {
     return null;
   }
@@ -405,8 +391,6 @@ export const DetailedStatus: React.FC<{
           onUpdate={handleChildUpdate}
           tagLinks={tagMisleadingLinks}
           rewriteMentions={rewriteMentions}
-          parseClick={parseClick}
-          disabled
           {...(statusContentProps as any)}
         />
 

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

@@ -132,7 +132,6 @@ const keyMap = {
   goToRequests: 'g r',
   toggleHidden: 'x',
   bookmark: 'd',
-  toggleCollapse: 'shift+x',
   toggleSensitive: 'h',
   openMedia: 'e',
 };