feat: Add a shortcut to opening the cards link (#1134)

* Add a shortcut to opening the cards link

* minor aesthetic tweaks

src/routes/_components/ShortcutHelpInfo.html

@@ -29,6 +29,7 @@
       <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>l</kbd> to open the card's link in a new tab</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>
     </ul>

src/routes/_components/status/StatusCard.html

@@ -1,4 +1,4 @@
-<a href="{url}" class="status-card" target="_blank" rel="noopener noreferrer">
+<a ref:cardlink href={url} class="status-card" target="_blank" rel="noopener noreferrer">
     <strong class="card-title">
      {title}
     </strong>
@@ -12,6 +12,9 @@
     </span>
   </div>
   {/if}
+  {#if enableShortcuts}
+  <Shortcut scope={shortcutScope} key="l" on:pressed="open(url)" />
+  {/if}
 </a>
 <style>
   .status-card {
@@ -72,9 +75,11 @@
 </style>
 <script>
   import LazyImage from '../LazyImage.html'
+  import Shortcut from '../shortcut/Shortcut.html'
 
   export default {
     components: {
+      Shortcut,
       LazyImage
     },
     computed: {
@@ -83,6 +88,14 @@
       url: ({ card }) => card.url,
       description: ({ card }) => card.description || card.provider_name,
       imageUrl: ({ card }) => card.image
+    },
+    methods: {
+      open () {
+        if (this.refs.cardlink) {
+          this.refs.cardlink.click()
+        }
+      }
+
     }
   }
 </script>