Vim-style navigation shortcuts

[rohitpaulk]

One feature I've always wanted in Todoist is vim-style navigation shortcuts. This issue is for planning what shortcuts to support in todoist-tribute.

Shortcuts

This list is very similar to GitHub's shortcuts:

Navigating to different parts of the app

• g followed by i Go to inbox
• g followed by p Go to projects list
• g followed by l Go to labels list

Navigating within a list

• j move selection down
• k move selection up
• enter do whatever a click would do. For projects, this opens the corresponding task list. For tasks, this opens the task for editing.
• e to edit.

If no active selection is present, pressing j will activate the first task in the list active on the screen.

Reading

• http://www.hanselman.com/blog/TheWebIsTheNewTerminalAreYouUsingTheWebsKeyboardShortcutsAndHotkeys.aspx
• https://medium.com/@sashika/j-k-or-how-to-choose-keyboard-shortcuts-for-web-applications-a7c3b7b408ee

[jasonrhaas]

Does todoist plan on adding this feature? I can't find a support forum or github repo for todoist.

[rohitpaulk]

@jasonrhaas Here's a link to Todoist's support page: https://support.todoist.com/hc/en-us.

As a side note, @amix is a huge fan of Vim, it might not be very difficult to convince him 😉

[jasonrhaas]

I submitted a ticket. Posted here as well:

Can we add Github Style VIM keyboard shortcuts? Navigating using h,j,k,l and the g + i, g + s, type shortcuts I think is second nature to a lot of people at this point. This feature would make todoist much more awesome!

[amix]

Yea, it's a disgrace that Todoist does still not support VIM movement keys! 😊 I actually wanted to do this for a long time, but never got time to do it... Maybe one day!

[jasonrhaas]

@amix any interest in tapping the open source community for this? I'm working on a project called Gitcoin that offers bounties for adding new features or fixing bugs in open source code repos. Might be a cheap/easy way to get in a new feature like this.

[amix]

@jasonrhaas would be very hard for external people to add this since we use a lot of custom code.

[mgsloan]

@amix @jasonrhaas I don't think it is that hard to add. Do y'all feel like putting up a bounty? I can take it on. I think it will take ~25 hours to add keybindings that wrap almost everything you'd want them to. Since this'd be opensource work and also scratch my own itch, how about a rate of $20 / hour, so $600? I realize that may seem greedy, but hey, this stuff takes work!

[mgsloan]

Realistically, though, I'd certainly do it for less $. A nice bonus would be a premium membership

[mgsloan]

To make things a bit more concrete, the initial goal would be to support most nearly all common non-premium features. I cannot currently implement the premium features because I haven't had todoist premium for the last year and a half (I do still really like using todoist, though). The price isn't that much, but without keyboard shortcuts, the premium features are fairly useless to me.

Anyway, here's a sketch of an initial goal / design for keybindings. They are mostly inspired by gmail keybindings. "Ctrl+k" comes from slack. I've put a fair bit of thought into these. If I don't end up implementing this, then hopefully future efforts will use similar keybindings:

Navigation

keys	action
j	move cursor down
k	move cursor up
h	collapse nested at cursor
l	expand nested at cursor
g g OR Ctrl+k	switch project via search prompt
g i	go to inbox
g t	go to today
g w	go to next 7 days

Manipulation of tasks at cursor

keys	action
enter	edit task at cursor
o	add task after cursor
shift+o	add task before cursor
ctrl+right	indent task at cursor
ctrl+left	dedent task at cursor

Selection

keys	action
x	add task at cursor to selection
* a	select all tasks
* n	clear selection
* 1	add all priority 1 tasks to selection
* 2	add all priority 2 tasks to selection
* 3	add all priority 3 tasks to selection
* 4	add all priority 4 tasks to selection

Manipulation of selected items

If none are selected, then these will probably apply to the cursor instead.

keys	action
t	schedule
v	move to project via search prompt
e	archive / complete
#	delete
1	set priority to 1
2	set priority to 2
3	set priority to 3
4	set priority to 4

Scheduling

When scheduling is opened via "t", the following keybindings will apply:

keys	date
t	tomorrow
n	today
w	next week
m	month
1 .. 31	day of month

[amix]

Hi @mgsloan

We could do it for $500 and lifetime TD Premium 😊

I am just unsure how we would integrate this into our codebase. Any ideas? Also, we need a vanilla JS version as we don't use any common libs (other than Redux and React, but they won't be of much help here).

[mgsloan]

@amix Awesome, thanks that's very generous of y'all! I accept this challenge :) No direct integration into the codebase is necessary, because it can be done by triggering events in the DOM. This does mean that it is highly coupled to a few particular classes and structures used in the DOM. I have started a prototype, and have tried to pick classes and element relationships that are unlikely to change. It should be fairly straightforward to adapt when / if the DOM changes.

An alternative approach would be to build it directly into todoist. Doing it as a userscript / browser extension has the advantage that it's easier to modify the keybindings or do custom keybindings. It becomes a bit less necessary to have keybinding configuration.

I should be able to have a decent demo ready by tomorrow. Is it ok if this is opensource and I share my progress?

Also I'm sure that @jasonrhaas would appreciate it if you used gitcoin, I like the look of that project a lot. I've been into ethereum for a while now and I don't mind if the market happens to decline in between creation of the bounty and completion.

[step21]

Suggestion: If a small library is ok: https://craig.is/killing/mice (mousetrap) Otherwise https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code no?

[mgsloan]

@step21 Thanks for the suggestion, my prototype uses mousetrap, we are on the same page :+1:

My only issue with mousetrap is it would be nice if it had named keymaps and let you enable / disable keymaps conditionally. So I could enable a keymap for scheduling actions when the schedule is visible. However, it isn't hard to work around this, just makes configuring the keybindings in the user script a bit trickier. Mousetrap's simplicity and concision is a feature so I get why it doesn't have this keymap business I'm talking about.

[amix]

I should be able to have a decent demo ready by tomorrow. Is it ok if this is opensource and I share my progress?

No need to hurry :-) And it's perfectly fine to open-source this 👍

[mgsloan]

@amix I've put up version 1! http://github.com/mgsloan/todoist-shortcuts

It has been uploaded in the form of chrome and firefox extensions: https://chrome.google.com/webstore/detail/todoist-shortcuts/dehmghpdcahlffompjagejmgbcfahndp https://addons.mozilla.org/en-US/firefox/addon/todoist-shortcuts/

Please let me know what you think. Rather predictably, my hourly estimate was off by a factor of 2, ended up spending 53 hours. Did get a bit perfectionistic, though there are still a fair number of lose ends. The ugliest bit right now is that u doesn't do undo any more. Otherwise I think it's pretty decent :+1:

[amix]

This is a fantastic v1 @mgsloan! 👏

I can see some improvements:

• Would love if we didn't have the blue bar, but used the reorder indicator to indicate where the task would be edited. This would also make it more natural to use with the mouse
• Seems like the new keyboard manager overrides the current shortcuts (e.g. a and A)

Please contact me on amix@doist.com for lifetime premium & the payment details. Given that you have spent 2x time on this, we'll pay $1000. 👍

[mgsloan]

This is a fantastic v1 @mgsloan!

Thank you! It was interesting to work on :) Javascript is not the language I use primarily, so I learned some new things about event dispatch and mutation observers

Would love if we didn't have the blue bar, but used the reorder indicator to indicate where the task would be edited. This would also make it more natural to use with the mouse

Good idea! I'll put it at the top of my list of next things to do. I will probably focus on other things for the next week or two, but should be able to put out another iteration mid february.

Seems like the new keyboard manager overrides the current shortcuts (e.g. a and A)

Yes, it's particularly unfortunate that u no longer works. o and O tend to be sufficient to no longer need a and A, but certainly they would still be good to have. This does seem more urgent than cursor style, I might get around to it in the next couple weeks. Particularly since I really want u in my own usage.

The reason for this is that some of the multi-key commands like * a were also triggering add. Removing the original key handlers also allows for the navigation mode to use all the alphanumeric keys.

Please contact me on amix@doist.com for lifetime premium & the payment details. Given that you have spent 2x time on this, we'll pay $1000.

That's super kind of y'all! Thanks!! I'll be recommending Todoist to people with even more enthusiasm :D

[mgsloan]

@amix Released version 2 which adds in support for some of the common original keybindings like u / q / A / a / s / p / r!

[amix]

@mgsloan Fantastic! 👏

[mmazur]

@amix if you guys would consider adding unique identifiers to all the menu items, so that they're easy to find for external scripts, that would help a lot. Cause the current todoist-shorctuts script depends heavily on menu items text comparison, which is really not great: for one, nothing but English UI is currently supported.

[mgsloan]

Yes, that would be great! I have documented it here https://github.com/mgsloan/todoist-shortcuts/issues/2 and in https://github.com/mgsloan/todoist-shortcuts/blob/master/development.md#changes-to-todoist-that-would-be-very-helpful

[amix]

@mmazur @mgsloan Adding a task should be doable, at least for the task menu actions 👍

[amix]

@mmazur @mgsloan The upcoming beta version v8899 will have added classes to all menu items.

Would love if we could address this item as it would make this much easier to use for me: 😊

Would love if we didn't have the blue bar, but used the reorder indicator to indicate where the task would be edited. This would also make it more natural to use with the mouse

[mgsloan]

@amix Fantastic, thanks!

Would love if we could address this item as it would make this much easier to use for me: blush

Would love if we didn't have the blue bar, but used the reorder indicator to indicate where the task would be edited. This would also make it more natural to use with the mouse

I have switched from using the blue bar to instead using the cursor - https://github.com/mgsloan/todoist-shortcuts/commit/f5240ca2299f7216cc5aac1854d32d391f8604eb - happily, this actually reduced code complexity a bit! Wish I'd thought of it when originally implementing, this is much better. I think at the time I didn't think of simulating mouseover events. I've released version 8 of the extension, which has this change.

I also made it so that x can be held down while moving the mouse over multiple tasks, or using j and k to visit multiple tasks. Unfortunately, I just noticed that this makes it a bit glitchy if you use gmail habits of rapidly alternating presses of x and j. I have a fix in mind but it will need to wait a few days.

[amix]

@mgsloan This is becoming pretty fantastic 👏

I think soon we could ship this to the actual production version of Todoist. What do you think is the currently biggest block of doing this?

[mgsloan]

@amix Thanks!! It would be great to get this included directly with Todoist so that more people will benefit from it. I have opened up an issue on the todoist-shortcuts tracker about blockers to shipping it in the production version https://github.com/mgsloan/todoist-shortcuts/issues/12

[JGregoryAtiba]

@amix Don't want to spam the thread, but I was waffling on purchasing Todoist Premium until I found @mgsloan 's excellent browser extension, and that sealed the deal. Would love to see this merged in to upstream Todoist so I can use from the desktop app, as well.