Merge branch 'shortcuts' into 'develop'

Fix keyboard shortcuts

See merge request soapbox-pub/soapbox-fe!555

app/soapbox/features/ui/components/hotkeys_modal.js

@@ -65,10 +65,6 @@ class HotkeysModal extends ImmutablePureComponent {
                 <td><kbd>h</kbd></td>
                 <td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></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>
-              </tr>
             </tbody>
           </table>
           <table>
@@ -79,12 +75,12 @@ class HotkeysModal extends ImmutablePureComponent {
             </thead>
             <tbody>
               <tr>
-                <td><kbd>down</kbd>, <kbd>j</kbd></td>
+                <td><kbd>up</kbd>, <kbd>k</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
+                <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
               </tr>
               <tr>
-                <td><kbd>1</kbd> - <kbd>9</kbd></td>
+                <td><kbd>down</kbd>, <kbd>j</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a post in one of the columns' /></td>
+                <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
               </tr>
               <tr>
                 <td><kbd>n</kbd></td>
@@ -110,14 +106,6 @@ class HotkeysModal extends ImmutablePureComponent {
                 <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>d</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.direct' defaultMessage='to open direct messages column' /></td>
-              </tr>
             </tbody>
           </table>
           <table>
@@ -128,8 +116,8 @@ class HotkeysModal extends ImmutablePureComponent {
             </thead>
             <tbody>
               <tr>
-                <td><kbd>g</kbd> + <kbd>s</kbd></td>
+                <td><kbd>g</kbd> + <kbd>n</kbd></td>
-                <td><FormattedMessage id='keyboard_shortcuts.start' defaultMessage='to open "get started" column' /></td>
+                <td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
               </tr>
               <tr>
                 <td><kbd>g</kbd> + <kbd>f</kbd></td>

app/soapbox/features/ui/index.js

@@ -126,7 +126,6 @@ const keyMap = {
   new: 'n',
   search: 's',
   forceNew: 'option+n',
-  focusColumn: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
   reply: 'r',
   favourite: 'f',
   boost: 'b',
@@ -138,7 +137,6 @@ const keyMap = {
   back: 'backspace',
   goToHome: 'g h',
   goToNotifications: 'g n',
-  goToStart: 'g s',
   goToFavourites: 'g f',
   goToPinned: 'g p',
   goToProfile: 'g u',
@@ -488,24 +486,6 @@ class UI extends React.PureComponent {
     this.props.dispatch(resetCompose());
   }
 
-  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 = () => {
     if (window.history && window.history.length === 1) {
       this.context.router.history.push('/');
@@ -536,29 +516,25 @@ class UI extends React.PureComponent {
     this.context.router.history.push('/notifications');
   }
 
-  handleHotkeyGoToStart = () => {
-    this.context.router.history.push('/getting-started');
-  }
-
   handleHotkeyGoToFavourites = () => {
     const { account } = this.props;
     if (!account) return;
 
-    this.context.router.history.push(`/${account.get('username')}/favorites`);
+    this.context.router.history.push(`/@${account.get('username')}/favorites`);
   }
 
   handleHotkeyGoToPinned = () => {
     const { account } = this.props;
     if (!account) return;
 
-    this.context.router.history.push(`/${account.get('username')}/pins`);
+    this.context.router.history.push(`/@${account.get('username')}/pins`);
   }
 
   handleHotkeyGoToProfile = () => {
     const { account } = this.props;
     if (!account) return;
 
-    this.context.router.history.push(`/${account.get('username')}`);
+    this.context.router.history.push(`/@${account.get('username')}`);
   }
 
   handleHotkeyGoToBlocked = () => {
@@ -599,11 +575,9 @@ class UI extends React.PureComponent {
       new: this.handleHotkeyNew,
       search: this.handleHotkeySearch,
       forceNew: this.handleHotkeyForceNew,
-      focusColumn: this.handleHotkeyFocusColumn,
       back: this.handleHotkeyBack,
       goToHome: this.handleHotkeyGoToHome,
       goToNotifications: this.handleHotkeyGoToNotifications,
-      goToStart: this.handleHotkeyGoToStart,
       goToFavourites: this.handleHotkeyGoToFavourites,
       goToPinned: this.handleHotkeyGoToPinned,
       goToProfile: this.handleHotkeyGoToProfile,