Right now we are required to have a "participant code". In the case of a user who is given the link to the newdle, we won't have neither their name nor availability. We should provide a page which asks for their name and shows no availability info.

The name icon kind of gets squeezed.

This is the page for creating a new...dle. While we don't have the components yet that should go there, we can put placeholders for them and setup the CSS to arrange everything nicely.

Some things which are missing:

• app logo;
• badges (only TravisCI for now?);
• small intro saying what the app does;
• CERN footer like the one we have on the Indico README;
• ... any others?

We need some sort of "welcome" page that visitors will see once they open the tool.
Please, let's discuss some mockups beforehand.

We currently don't show it.

This should turn all options to green in a non-destructive way (e.g. switching it off should come back to the previous selection state).

• route for newdle creation page (/new?)
• default 404 route

This can be achieved in two ways:

• "Back and forth" arrows, which should be added in accordance with the mock-ups;

• Clicking on a day, just like when setting up a newdle;

This is the calendar (react-dates?) where you select a day on which to see participant availability & add time slots.

Days that have time slots should be highlighted so it's clearly visible which days are used. Removing the last time slot from a day should remove this highlight.

The active day should be highlighted differently regardless of whether it has time slots or not.

Adding the new logo broke it since it's pushing everything else

It's easy for users to lose track of how many options have been added so far, if they have done so over many days (even more so for months).

My amazing mock-up:

Now seriously, it would be nice to have some kind of indicator in there.

We should be able to navigate through the days by clicking on it.

It's already possible to edit an answer by knowing its URL. However, the UI is not very clear.
I suspect, however, that we will need some way of figuring out whether it is the first time the user is answering that particular newdle, so that we can show the button as "Save answer" or "Submit answer", for instance. Rather than adding yet another column to the Participant model, we could just check whether answers is empty. Opinions?

This means generating some random ID at newdle creation time. For now we can just use a UUID, but maybe for the production service we should consider the same approach we used for ursh.

the second one could maybe use a tooltip instead of showing something inside the slot

This page should serve both as the "final page" after a newdle gets created and something the creator can come back to to see the status of the newdle. It should display:

• a summary of the participants and selected options as well as their choices;
• the link to the newdle that can be shared with the participants;

• Show clearly that two adjacent slots are not connected;
• Show start/end times on hover.

Right now it's impossible to reset the current state data without either creating a newdle or reloading the page. If the user wants to start from scratch, they should be able to.
An option could be to add some 'beforeunload' logic that triggers also whenever someone tries to access /.

Participants should receive an e-mail with a unique link to their answer page.

Displays the field for the duration with some text around it.

If someone wants to get started on this before #27 is done, they can just use mock data for now.

Main UI is an avatars (using Gravatar, with https://ui-avatars.com/ or somehing similar as a fallback)

When clicking it, opens something dropdown-ish containing:

• Login/Logout (just show one for now and keep the other one hidden - we'll update that once the login code is ready)
• Your full name/email?

Or do we want to show something completely different while not logged-in? Probably something to see later; for now having a Login action in there is the easiest option.

Dates/times should be already timezone-aware in the backend, so not much should need to be done.

• We should add a timezone selector in step 2, which could default to the user's client timezone;
• When creating the newdle, we should send the selected timezone along with it.

Basically something like POST /newdle/new, which creates a new newdle with given participants (if any).

• expand timeline when newdle has time slots out of default hours range
• make sure time slots that end at midnight are displayed properly

We need basic stuff, like creating a fresh DB. We can add alembic later.

They currently look like this:

I think it's not very readable and we could probably come up with something better. One option would be two buttons, one with a one-arrow icon and the other one with a "fast" forward double-arrow icon.
I also think that making step indicators clickable would help a great deal with UX.

Based on the great exchangelib.

Currently the user does't have a good overview of selected timeslots
The idea is to display the number of all currently created time slots on the page below.

We could also consider listing chosen time slots (simple list with dates and times)

We can probably use a simplified version of the search dialog we have in Indico.

Currently the client-side app just blows up if one of those codes are invalid. We should rather show a proper error message / 404 page.

At this point we should ask the user for the event's title. We should also tell the user that the participants will receive an e-mail once they confirm the creation.

POST /api/newdle should be called with the filled in info (also from the previous steps) and then the page should change slightly to reflect that fact that the newdle has been created.

This should obviously send a request to submit the answer.

• Newdle (or some more generic name): stores information such as creator, duration, timezone and final date/time. Time slots can probably be stored in JSONB.
• Participant: linked to a Newdle, stores name etc. and has a JSONB column for the user's answers.

Why JSONB for time slots / answers?

• Modifying a Newdle is not planned for now, and it would be an atomic operation anyway. So there is no need to edit/add/remove individual time slots.
• When a user answers, the availability is for a given date/time (which would not change even if that time slot was moved), so storing it as such is more natural than a time slot ID.

Those should be displayed as per the mock-ups.

Displays the timeline listing all participants and their availability. Each participant will be another component (Participant) that's shown inside the Timeline.

This is a row in the timeline showing name, avatar and availability of a participant.

When I open the URL of an answer form I should get my name somewhere, so that it's clear that this is my answer page.

A page listing all the newdles the user has created and their current state (finished, ongoing, number of answers...).

We should add a button next to "create event", which would send a simple e-mail to all known participants whose e-mail address we know about. The mail should just announce what the final date is.

• Shows in which creation step you are
• Shows a title/description of that step

Could either be generic (props: steps, current, title, description) or specific to the steps we have (props: step). Generic is probably cleaner since that way the parent component handles the data shown in it.

This is the row in the timeline where you create time slots on the active day.

This happens as soon as the timeslot ends at/after midnight.