Feedback needed for time picker popup triggered via short syntax

[bytrangle]

Displaying a time picker via shortcut is different from tags and projects, so I've made a mockup to see if this is what users want.

After a user types "@", a time picker should open. Use the current time picker, but add an input field for entering the date in natural language. This input field has placeholder text that tells users what they are supposed to do :)

After a user has entered the date, the chosen date will be highlighted on the calendar, and the chosen time (if it is included) will be filled in the time field.

I'm debating whether it's necessary to display the parsed date under the date entered by the user.

[johannesjo]

Thanks for the mockup!

Really a tricky question. We definitely need to limit vertical space. We also can't use the left and right key at this place (or need to lock the cursor in place) so maybe some sort of autocomplete dropdown with some likely suggestions first is a better way to go at least for keyboard oriented users as it works on a single axis? Not sure tbh. Any suggestions @papernoise ? :)

We also should check how other todo apps do it.

Mockups:

[Some task text @tom|]
 Tomorrow 9:00
 Tomorrow 10:00
 Tomorrow 11:00
 Tomorrow 12:00
...

[Some task text @20|]
Today, 20:00 (if applicable)
Tomorrow, 20:00
24th Oct,  20:00
25th Oct,  20:00
26th Oct,  20:00
...

[papernoise]

I'm also inclined to say that the full time picker is a bit overkill here. A list of suggestions seems the way to go, although I think it would be really useful to be able to cycle between the suggestions using the arrow keys (maybe up/down?), since we're in a completely keyboard-driven context here. Ideally when hitting the arrow key the text would already appear in your text box (a bit like hitting up/down in the terminal) so that you can then edit it further. So I could for example write @tom as in the example above, pick the time closest to what I want – let's say 12:00 – and then in case change that to 12:30 if need it to be that precise. Most of the time I think one would just pick one of the predefined times.

Another option would be to autocomplete only the individual parts (date and time) so if I start to write @tom it would suggest "@tomorrow" and hitting an arrow key would then enter that in the text field. If I start to write @2 it would start to suggest dates starting from @20 Oct (current month), if then write @24 it would give me a list of 24th for the current and next months, the arrow keys would let me choose an option.

So adding a due time and date would essential work in two steps:

1. start to write the date, hit up/down to choose/enter the info in the text field
2. start to write a time, and again up/down to choose enter the info.

[johannesjo]

Thank you very much for your input @papernoise !

I think we should stick to suggestions including time and date. When the value is entered the user can then use the left key to change parts that don't fit.

As you mention the up/down keys should definitely be usable for selection as it is for the autocompletion of tags and projects.

@bytrangle what do you think?

[bytrangle]

That sounds about right. It has occurred to me recently that when entering date/time via short syntax, date picker may not be necessary because the user already has an idea of the time/date they want to commit to. The dropdown can be as simple as this:

So where's the place for time picker? It is useful when we want to avoid assigning a task to the off day.There may be another field under the input which includes a date picker button, like what Todoist is doing.

[bytrangle]

And if you're concerned about the time picker being too long:

• If it's near the end of October, there is no need to display the previous weeks.
• You can see the height limit for the time picker and making scrollable. There is no need to display the next month in full if we aren't sure if that's what the user is thinking :)

simplescreenrecorder-2024-10-29_17.10.40.mp4

[johannesjo]

Thanks for digging into this @bytrangle !

I think a more sophisticated time selector with a mini calendar would play out its biggest advantages for mobile and more mouse oriented users. For that also adding the other selector buttons for projects and tags would probably be very helpful. But for that we would need to redesign the add task bar from ground up. For desktop and for my personal usage I generally prefer a more keyboard focused approach but it should be possible to integrate this into the multi button approach as well.

What todoist is doing is imho really nice, but not trivial to implement. I think in the long run we should go down a similar road (while maintaining short syntax support) mainly to help mobile and mouse oriented users. MS todo does something similar.

As a smaller increment for now, I think the addition of the simple smart up down selector (similar like it is done for tags and projects now) would be a cool addition as well and maybe the ideal solution for more keyboard oriented desktop app users.

[friday]

If someone wants next next Friday you should tag @nextfriday instead. Maybe they'll know what to do ;)

(use back tick code blocks ` not to tag people @bytrangle, @papernoise)

[bytrangle]

To update on adding a time picker via short syntax:
Technically, it can be implemented as followed:

1. In add-task-bar component, detect if the keyboard key is @.
2. Use Material Dialog to open the dialog-schedule-task component

// add-task-bar.component.ts
import { DialogScheduleTaskComponent } from ...

export AddTaskBarComponent implements AfterViewInit, OnDestroy {
  constructor(
    private readonly _matDialog: MatDialog
  )
  ngAfterViewInit(): void {
    this._attachKeyDownHandlerTimeout = window.setTimeout(() => {
  ... if (ev.key === '@') {
        this._matDialog.open(DialogScheduleTaskComponent, {
          autoFocus: false
        })
      }
  })
  }
}

Problem is: DialogScheduleComponent requires being passed Task data

export class DialogScheduleComponent implements AfterViewInit {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { task: Task; targetDay?: string }
  )
}

What do you suggest, @johannesjo ? Maybe implement another component similar to DialogScheduleTaskComponent but doesn't require data property?

[johannesjo]

A dialog is not the right tool for this, if we want to integrate it into the add task bar. The cdk-overlay might be better suited.

[bytrangle]

The reason dialog is not suitable is because it takes over everything?

[johannesjo]

Yes. And it looks in the keyboard and is not easily positioned where we want it.