feat: . shortcut to show new items (#2612)

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -65,6 +65,10 @@ const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
         description: t('magic_keys.groups.actions.compose'),
         shortcut: { keys: ['c'], isSequence: false },
       },
+      {
+        description: t('magic_keys.groups.actions.show_new_items'),
+        shortcut: { keys: ['.'], isSequence: false },
+      },
       {
         description: t('magic_keys.groups.actions.favourite'),
         shortcut: { keys: ['f'], isSequence: false },

components/notification/NotificationPaginator.vue

@@ -174,7 +174,7 @@ const { formatNumber } = useHumanReadableNumber()
     :virtualScroller="virtualScroller"
   >
     <template #updater="{ number, update }">
-      <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
+      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>

components/timeline/TimelinePaginator.vue

@@ -25,7 +25,7 @@ const showOriginSite = computed(() =>
 <template>
   <CommonPaginator v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
     <template #updater="{ number, update }">
-      <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
+      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>

locales/en.json

@@ -228,6 +228,7 @@
         "compose": "Compose",
         "favourite": "Favourite",
         "search": "Search",
+        "show_new_items": "Show new items",
         "title": "Actions"
       },
       "media": {

locales/es.json

@@ -228,6 +228,7 @@
         "compose": "Redactar",
         "favourite": "Favorito",
         "search": "Búsqueda",
+        "show_new_items": "Mostrar nuevas publicaciones",
         "title": "Acciones"
       },
       "media": {

plugins/magic-keys.client.ts

@@ -55,4 +55,12 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
       ?.click()
   }
   whenever(logicAnd(isAuthenticated, notUsingInput, keys.b), toggleBoostActiveStatus)
+
+  const showNewItems = () => {
+    // TODO: find a better solution than clicking buttons...
+    document
+      ?.querySelector<HTMLElement>('button#elk_show_new_items')
+      ?.click()
+  }
+  whenever(logicAnd(isAuthenticated, notUsingInput, keys['.']), showNewItems)
 })