Keyboard navigation

[pbek]

Implements parts of #2480 and serves as basis for other keyboard shortcuts.

WORK IN PROGRESS!

TODO

• Integrate a way to use the keyboard to call functions
• Use j/k to navigate feed items
  • Find a proper item if none was selected
  • Mark item as read, if needed
• Add changelog

Optional

• Automatic scrolling in feed item list
• Highlight current feed item in feed item list

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Changelog entry added for all important changes.

[pbek]

@SMillerDev, I tried to use https://www.npmjs.com/package/vue-shortkey in https://github.com/nextcloud/news/pull/2671/files to use the keyboard, seems quite ok, see (1).

Is there a "current feed item" already, so I can try to find the previous and next item, see (2)?

[pbek]

This is the current item: this.$store.getters.selected.
And those are all items in the list: this.$store.getters.allItems?

[pbek]

Jumping to the previous and next item kind of works, but I cannot use this.$store.getters.allItems directly, I need to be more aware in what view I am.
And it would be great to mark the current item in the list.

[pbek]

Thought too complicated, I just need to use this.items. 🤦🏻

It's filterSortedItems() 😊

[pbek]

@Grotax, @SMillerDev, any feedback so far? Keyboard navigation with j/k works fine for me.

I wanted to scroll to the current item, but d21f1a7 didn't seem to do anything in the VirtualScroll. ️🤷🏻

And it would be great to introduce some different highlighting of the "active item" in the list. Haven't managed to do so.

Any suggestions on the both or feedback to the current code?

[Grotax]

Didn't have time to look at it yet.

[pbek]

Anything I can help with?

[Grotax]

Hi, looks good to me also tried it J/K works for me too. I have to say me and @SMillerDev have mostly only taken care of the backend. The frontend is kind of unmaintained. Which is why we hope to find someone that is willing to take care of the frontend long-term, to update it from time to time and slowly fix bugs.

What I would like to see before we merge:

• Squash fix commits
• Sign-Off on commits (required by nextcloud org) see https://github.com/nextcloud/news/pull/2671/checks?check_run_id=25450071400

While at it you could maybe also rebase on top of master the changelog is conflicting now :)

Thanks for working on this :)

[pbek]

I discarded the my squashed commit by accident in the GitHub interface, while I wanted to discard my commit in my master branch, that closed this PR and I can't reopen it 🙄

[pbek]

Hm, and now I can?

[pbek]

Squashed, signed off and rebased to the current master...

[pbek]

The frontend is kind of unmaintained. Which is why we hope to find someone that is willing to take care of the frontend long-term, to update it from time to time and slowly fix bugs.

There is a big mountain of missing stuff... 🗻 😅
I usually have my hand full with https://github.com/pbek/QOwnNotes and all the surrounding tooling. 😆

[pbek]

Thank you!

[tete2soja]

Hello,

Thank you for the work with keyboard. Please to use it.
I noticed that the console and inside Nextcloud an error is triggered if the feed is empty and try to use j/k.

TypeError: e is undefined

Uncaught (in promise) TypeError: e is undefined
    clickItem https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    jumpToNextItem https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    kn https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    n https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    _wrapper https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    m https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    keyDown https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2
    exports https://domain.tld/apps/news/js/nextcloud-news-main.js?v=1965c3ee-8:2

[pbek]

Thank you, I'll fix that.

[pbek]

Should be fixed in #2689.