Keyboard shortcuts

We're ramping up our accessibility features and enhancing the user experience by adding keyboard shortcuts, beginning with the simple yet crucial 'Escape' key function to close modals. More keyboard shortcuts are in the pipeline, such as ones for creating a new task, opening settings, navigating through the task list, and opening selected tasks. This feature doesn't only boost accessibility but is also tailored for those desktop users who prefer keeping their fingers on the keyboard, sparing the use of mouse or trackpad.

In parallel to these user interface enhancements, we're also developing a Command Line Interface (CLI) tool for our API. This tool will include a series of keyboard shortcuts to help users create, edit, search, and organize tasks, task lists, templates, and more. Specifically targeted towards terminal users, the CLI tool will offer a speedy and efficient way to manage tasks. Not only does this tool provide practical benefits, it also showcases the versatility of our API. Personally, it's an exciting project as it's the first time I'm delving into the creation of a comprehensive CLI tool.

Date grouped list items

Here's what we've been up to: we thought it'd be a good idea to sort tasks by date. So, we've set up categories like Future, Next Month, Next Week, Tomorrow, Today, Yesterday, Last Week, Last Month, and Past. This way, it's easier for users to handle their tasks and it doesn't get too detailed. To keep things clear, each group has a sticky header that hangs out at the top of the list as you scroll, until the next group comes along.

Now, pairing up these date groupings with sticky headers wasn't exactly a walk in the park, given that we're using a virtual list. But we decided to make peace with some inefficiencies when a date group has a whole bunch of items, rather than overhauling the virtual list control.

One key move was placing the sticky headers inside a specific element. This reduced the workload for the browser and eliminated any lag, especially on mobile devices. With the header inside a relative container, it moves smoothly up to its sticky position, then scrolls up and off the screen with its related items, and we don't even have to mess with scroll events.

We've also added a placeholder for the 'Today' group. It's always there, even if there are no tasks. We thought it would be good to let users know when they don't have any tasks for today, but without messing with the overall look of the groups.

And just a heads up: we're about to add an 'Add task' button on the headings. Click it, and you can add a task with the date preset to the closest date in that range. Also, if you click on a heading, it and its tasks jump to the top of the list, no matter where they were before.

Columns

Working with SvelteKit is a pretty sweet deal, especially thanks to its simplicity in handling reactivity. All you need is a $: statement, and you're good to roll. One of the recent upgrades in Tizli is adding two columns for the desktop view in the planning section, which really helps us utilize the screen space better. It determines the layout by measuring if the device or screen width is larger than a typical mobile device with its menu tucked away. If it is, you get a single column; if it's smaller, it switches to a two-column layout.

The decision about whether to hide or display the left navigation menu is also based on the screen width, using the same responsive targets as when deciding on the column layout. Even though there might be a few different iterations of this approach, once you get your hands on it, everything falls into place and it just feels intuitive and easy to use.