feat: add more keyboard shortcuts (#904)

* feat: add more keyboard shortcuts

largely fixes #895

* oops wrong test name

src/routes/_actions/mention.js

@@ -0,0 +1,8 @@
+import { importShowComposeDialog } from '../_components/dialog/asyncDialogs'
+import { store } from '../_store/store'
+
+export async function composeNewStatusMentioning (account) {
+  store.setComposeData('dialog', { text: `@${account.acct} ` })
+  let showComposeDialog = await importShowComposeDialog()
+  showComposeDialog()
+}

src/routes/_components/NavShortcuts.html

@@ -6,6 +6,7 @@
 <Shortcut key="g c" on:pressed="goto('/community')"/>
 <Shortcut key="s" on:pressed="goto('/search')"/>
 <Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/>
+<Shortcut key="c" on:pressed="showComposeDialog()"/>
 {#each $navPages as navPage, i}
   <Shortcut key={(i + 1).toString()} on:pressed="goto(navPage.href)" />
 {/each}
@@ -13,7 +14,7 @@
 <script>
   import Shortcut from './shortcut/Shortcut'
   import { goto } from '../../../__sapper__/client'
-  import { importShowShortcutHelpDialog } from './dialog/asyncDialogs'
+  import { importShowShortcutHelpDialog, importShowComposeDialog } from './dialog/asyncDialogs'
   import { store } from '../_store/store'
 
   export default {
@@ -26,6 +27,10 @@
       async showShortcutHelpDialog () {
         let showShortcutHelpDialog = await importShowShortcutHelpDialog()
         showShortcutHelpDialog()
+      },
+      async showComposeDialog () {
+        let showComposeDialog = await importShowComposeDialog()
+        showComposeDialog()
       }
     }
   }

src/routes/_components/ShortcutHelpInfo.html

@@ -1,30 +1,58 @@
-<div class="{inDialog ? 'in-dialog' : ''}">
+<div class="shortcut-help-info {inDialog ? 'in-dialog' : ''}">
-  <ul>
+  <h2>Global</h2>
-    <li><kbd>s</kbd> to search</li>
+  <div class="hotkey-group">
-    <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
+    <ul>
-    <li><kbd>g</kbd> + <kbd>h</kbd> to go home</li>
+      <li><kbd>c</kbd> to compose a new toot</li>
-    <li><kbd>g</kbd> + <kbd>n</kbd> to go to the notifications page</li>
+      <li><kbd>s</kbd> to search</li>
-    <li><kbd>g</kbd> + <kbd>l</kbd> to go to the local stream page</li>
+      <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
-    <li><kbd>g</kbd> + <kbd>t</kbd> to go to the federated stream page</li>
+      <li><kbd>g</kbd> + <kbd>h</kbd> to go home</li>
-    <li><kbd>g</kbd> + <kbd>c</kbd> to go to the community page</li>
+      <li><kbd>g</kbd> + <kbd>n</kbd> to go to notifications</li>
-    <li><kbd>j</kbd> or <kbd>↓</kbd> to activate the next status</li>
+      <li><kbd>g</kbd> + <kbd>l</kbd> to go to the local timeline</li>
-    <li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous status</li>
+      <li><kbd>g</kbd> + <kbd>t</kbd> to go to the federated timeline</li>
-    <li><kbd>o</kbd> to open the active status</li>
+      <li><kbd>g</kbd> + <kbd>c</kbd> to go to the community page</li>
-    <li><kbd>f</kbd> to favorite the active status</li>
+      <li><kbd>h</kbd> or <kbd>?</kbd> to toggle the help dialog</li>
-    <li><kbd>b</kbd> to boost the active status</li>
+      <li><kbd>Backspace</kbd> to go back, close dialogs</li>
-    <li><kbd>r</kbd> to reply to the active status</li>
+    </ul>
-    <li><kbd>x</kbd> to show or hide text behind content warning in the active status</li>
+  </div>
-    <li><kbd>y</kbd> to show or hide sensitive media in the active status</li>
+  <h2>On an active toot</h2>
-    <li><kbd>h</kbd> or <kbd>?</kbd> to toggle the help dialog</li>
+  <div class="hotkey-group">
-    <li><kbd>Backspace</kbd> to go back, close dialogs</li>
+    <ul>
-  </ul>
+      <li><kbd>o</kbd> to open the thread</li>
+      <li><kbd>f</kbd> to favorite</li>
+      <li><kbd>b</kbd> to boost</li>
+      <li><kbd>r</kbd> to reply</li>
+      <li><kbd>m</kbd> to mention the author</li>
+      <li><kbd>p</kbd> to open the author's profile</li>
+      <li><kbd>x</kbd> to show or hide text behind content warning</li>
+      <li><kbd>y</kbd> to show or hide sensitive media</li>
+      <li><kbd>j</kbd> or <kbd>↓</kbd> to activate the next toot</li>
+      <li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous toot</li>
+    </ul>
+  </div>
 </div>
 <style>
+  .shortcut-help-info {
+    overflow-y: scroll;
+    scrollbar-width: none;
+  }
+  .shortcut-help-info::-webkit-scrollbar {
+    display: none;
+  }
   li {
     list-style-type: none;
   }
   .in-dialog li {
     color: var(--muted-modal-text);
+    font-size: 0.9em;
+  }
+  .in-dialog h2 {
+    color: var(--muted-modal-text);
+  }
+  .hotkey-group {
+    margin: 0 0 10px 10px;
+  }
+  .shortcut-help-info h2 {
+    margin: 10px 0;
   }
   kbd {
     color: #333;

src/routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -10,7 +10,6 @@
 import ModalDialog from './ModalDialog.html'
 import { store } from '../../../_store/store'
 import GenericDialogList from './GenericDialogList.html'
-import { importShowComposeDialog } from '../asyncDialogs'
 import { createDialogId } from '../helpers/createDialogId'
 import { show } from '../helpers/showDialog'
 import { close } from '../helpers/closeDialog'
@@ -21,6 +20,7 @@ import { setAccountFollowed } from '../../../_actions/follow'
 import { setShowReblogs } from '../../../_actions/setShowReblogs'
 import { setDomainBlocked } from '../../../_actions/setDomainBlocked'
 import { copyText } from '../../../_actions/copyText'
+import { composeNewStatusMentioning } from '../../../_actions/mention'
 
 export default {
   oncreate,
@@ -140,12 +140,8 @@ export default {
       }
     },
     async onMentionClicked () {
-      let { acct } = this.get()
+      let { account } = this.get()
-      this.store.setComposeData('dialog', {
+      await composeNewStatusMentioning(account)
-        text: `@${acct} `
-      })
-      let showComposeDialog = await importShowComposeDialog()
-      showComposeDialog()
       this.close()
     },
     async onFollowClicked () {

src/routes/_components/status/Notification.html

@@ -3,14 +3,19 @@
           {status} {notification} {active} {shortcutScope} on:recalculateHeight
   />
 {:else}
-  <article class="notification-article {active ? 'active' : ''}"
+  <article class="notification-article {active ? 'status-active' : ''}"
            tabindex="0"
            aria-posinset={index}
            aria-setsize={length}
            aria-label={ariaLabel}
+           status-active={active}
   >
     <StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
                   {account} {accountId} {uuid} isStatusInNotification="true" />
+    {#if shortcutScope}
+      <Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
+      <Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
+    {/if}
   </article>
 {/if}
 <style>
@@ -20,7 +25,7 @@
     padding: 10px 20px;
     border-bottom: 1px solid var(--main-border);
   }
-  .notification-article.active {
+  .notification-article.status-active {
     background-color: var(--status-active-background);
   }
   @media (max-width: 767px) {
@@ -34,14 +39,22 @@
 <script>
   import Status from './Status.html'
   import StatusHeader from './StatusHeader.html'
+  import Shortcut from '../shortcut/Shortcut.html'
   import { store } from '../../_store/store'
   import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
+  import { goto } from '../../../../__sapper__/client'
+  import { composeNewStatusMentioning } from '../../_actions/mention'
 
   export default {
     components: {
       Status,
-      StatusHeader
+      StatusHeader,
+      Shortcut
     },
+    data: () => ({
+      active: false,
+      shortcutScope: null
+    }),
     store: () => store,
     computed: {
       account: ({ notification }) => notification.account,
@@ -55,6 +68,16 @@
       ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
         !status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
       )
+    },
+    methods: {
+      openAuthorProfile () {
+        let { accountId } = this.get()
+        goto(`/accounts/${accountId}`)
+      },
+      async mentionAuthor () {
+        let { account } = this.get()
+        await composeNewStatusMentioning(account)
+      }
     }
   }
 </script>

src/routes/_components/status/Status.html

@@ -36,7 +36,9 @@
   {/if}
 </article>
 {#if shortcutScope}
-<Shortcut scope="{shortcutScope}" key="o" on:pressed="open()"/>
+  <Shortcut scope={shortcutScope} key="o" on:pressed="open()" />
+  <Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
+  <Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
 {/if}
 
 <style>
@@ -127,6 +129,7 @@
   import { measureText } from '../../_utils/measureText'
   import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
   import { absoluteDateFormatter } from '../../_utils/formatters'
+  import { composeNewStatusMentioning } from '../../_actions/mention'
 
   const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
   const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@@ -165,6 +168,7 @@
       Shortcut
     },
     data: () => ({
+      active: false,
       notification: void 0,
       replyVisibility: void 0,
       contentPreloaded: false,
@@ -197,6 +201,14 @@
       open () {
         let { originalStatusId } = this.get()
         goto(`/statuses/${originalStatusId}`)
+      },
+      openAuthorProfile () {
+        let { originalAccountId } = this.get()
+        goto(`/accounts/${originalAccountId}`)
+      },
+      async mentionAuthor () {
+        let { originalAccount } = this.get()
+        await composeNewStatusMentioning(originalAccount)
       }
     },
     computed: {

tests/spec/025-shortcuts-status.js

@@ -1,12 +1,14 @@
 import { Selector as $ } from 'testcafe'
 import {
+  closeDialogButton,
+  composeModalInput,
   getNthFavorited,
   getNthStatus,
   getNthStatusContent,
   getNthStatusMedia,
   getNthStatusSensitiveMediaButton,
   getNthStatusSpoiler,
-  getUrl, notificationsNavButton,
+  getUrl, modalDialog,
   scrollToStatus
 } from '../utils'
 import { homeTimeline } from '../fixtures'
@@ -128,19 +130,28 @@ test('Shortcut f toggles favorite status', async t => {
     .expect(getNthFavorited(idx)).eql('false')
 })
 
-test('Shortcut f toggles favorite status in notification', async t => {
+test('Shortcut p toggles profile', async t => {
-  let idx = 0
+  let idx = indexWhere(homeTimeline, _ => _.content === 'pinned toot 1')
   await loginAsFoobar(t)
   await t
     .expect(getUrl()).eql('http://localhost:4002/')
-    .click(notificationsNavButton)
-    .expect(getUrl()).contains('/notifications')
     .expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
-    .expect(getNthFavorited(idx)).eql('false')
     .pressKey('j '.repeat(idx + 1))
     .expect(getNthStatus(idx).hasClass('status-active')).ok()
-    .pressKey('f')
+    .pressKey('p')
-    .expect(getNthFavorited(idx)).eql('true')
+    .expect(getUrl()).contains('/accounts/3')
-    .pressKey('f')
+})
-    .expect(getNthFavorited(idx)).eql('false')
+
+test('Shortcut m toggles mention', async t => {
+  let idx = indexWhere(homeTimeline, _ => _.content === 'pinned toot 1')
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
+    .pressKey('j '.repeat(idx + 1))
+    .expect(getNthStatus(idx).hasClass('status-active')).ok()
+    .pressKey('m')
+    .expect(composeModalInput.value).eql('@quux ')
+    .click(closeDialogButton)
+    .expect(modalDialog.exists).notOk()
 })

tests/spec/026-shortcuts-notification.js

@@ -0,0 +1,58 @@
+import {
+  closeDialogButton,
+  composeModalInput,
+  getNthFavorited,
+  getNthStatus,
+  getUrl, modalDialog, notificationsNavButton
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+
+fixture`026-shortcuts-notification.js`
+  .page`http://localhost:4002`
+
+test('Shortcut f toggles favorite status in notification', async t => {
+  let idx = 0
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .click(notificationsNavButton)
+    .expect(getUrl()).contains('/notifications')
+    .expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
+    .expect(getNthFavorited(idx)).eql('false')
+    .pressKey('j '.repeat(idx + 1))
+    .expect(getNthStatus(idx).hasClass('status-active')).ok()
+    .pressKey('f')
+    .expect(getNthFavorited(idx)).eql('true')
+    .pressKey('f')
+    .expect(getNthFavorited(idx)).eql('false')
+})
+
+test('Shortcut p toggles profile in a follow notification', async t => {
+  let idx = 5 // "@quux followed you"
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .click(notificationsNavButton)
+    .expect(getUrl()).contains('/notifications')
+    .expect(getNthStatus(0).exists).ok({ timeout: 30000 })
+    .pressKey('j '.repeat(idx + 1))
+    .expect(getNthStatus(idx).hasClass('status-active')).ok()
+    .pressKey('p')
+    .expect(getUrl()).contains('/accounts/3')
+})
+
+test('Shortcut m toggles mention in a follow notification', async t => {
+  let idx = 5 // "@quux followed you"
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .click(notificationsNavButton)
+    .expect(getUrl()).contains('/notifications')
+    .expect(getNthStatus(0).exists).ok({ timeout: 30000 })
+    .pressKey('j '.repeat(idx + 1))
+    .expect(getNthStatus(idx).hasClass('status-active')).ok()
+    .pressKey('m')
+    .expect(composeModalInput.value).eql('@quux ')
+    .click(closeDialogButton)
+    .expect(modalDialog.exists).notOk()
+})