Implement Firebase Performance

The backdropFilter should be applied on the first render to make sure that there's a consistent design experience

Add local todos state to stop jumping items

Replace Skeleton package with Tailwind Pulse animation to show loading states

The Button should be able to be both rectangular and round

The filter bar should have the following options:

• show # active todo's;
• filter by all, active and completed todo's;
• clear completed todo's which removes all completed todo's from the DB;

Replace checked image in RoundedCheckbox with an svg icon

The text should not be selectable

This is apparently best practice at Vercel:
vercel/swr#468

https://chakra-ui.com/docs/getting-started

The textfields on the login screen are too big on mobile.
Setting the width on auto should fix the issue.

This is due to the nature of SSR.

See screenshot:

Fix responsive layout by using sm/md/xl values instead of mobile/desktop

Create animations when a Todo is added or removed but also when switching filters

• create Login page

Currently the styling of the Toast messages are not generalised and is configured everywhere a Toast is used.
This should be generalised and abstracted into some reusable logic

Also see:
https://firebase.google.com/docs/auth/web/account-linking

This is now white/grey which gives an ugly constrast

When you open the app and are not logged you'll be automatically forwarded to the login page.
A moment before that happens you still see an empty Todo App.
This should not be happening.
Conditionally rendering the LoadingScreen component if there's no user yet will fix this.

Fix debounce when changing the title.
Currently it seems that the debounce is not working and a Todo gets updated with every keypress.
This also gives an overflow of update Toasts

Probably need to explicitly tell NextJS-auth to route to / on signIn

Currently the delete button doesn't get selected when tabbing.

I.e. see clearCompleted() in hooks/useTodos.tsx.
There it's possible that some todo's weren't successfully deleted.
In this case, a notification (see Material-ui Snackbar) should be shown.

Add toast errors in useTodos.
This shows the user a toast notification in case anything goes wrong when trying to mutate a todo (i.e. user is missing permissions)

Improve ordering of todos algorithm.
Currently I'm using a linked-list where there's a todo.order property that stores the order of each item in the todos container.
This has the consequence that all todo's have to be mutate when the order changes. This is very inefficient.

As an alternative I want to add an array of the todo id's for the specific user.
This array can be used for the ordering of the todos

Change todo items input boxes to multi line.
This because the amount of available text is currently too limited on mobile

bugfix: DnD does't work properly on mobile.
Currently you first need to touch-start on it and then do another touch-start to actually drag it.

if an item is dragged into a different position on the list, and then that same item is 'checked' (i.e. marked as done) that item would jump back from its new position to its old position

This is an issue with NextJs-auth and would be fixed by adding state: false in /api/[...nextauth].ts under the providers:

// [...nextauth].ts
Providers.Google({
  clientId: process.env.NEXTAUTH_GOOGLE_ID,
  clientSecret: process.env.NEXTAUTH_GOOGLE_SECRET,
  state: false, // Disable the state feature
}),

nextauthjs/next-auth#656

• implement react-toastify
• add Firebase Cloud Messaging
• fix #24
• fix #36

This also should fix:
#24
#36