Welcome screen quickstart improvements

[afarago]

Welcome screen improvements inspired for pybricks/support#1264

[dlech]

Thanks for working on this.

Some suggestions to improve it even more:

1. I think it would be better if the actions didn't overlap the logo. So we could make the actions aligned to the bottom or to the left and then have the logo be dynamically sized to fill the remaining space
2. I don't think "open existing project" is the best choice. If the project tab is already open, the button will do nothing. So it may seem to the user that the button is broken. Instead, I would suggest to provide a list of the 3 most recently used projects, if any, where clicking on one of the projects will open it.

[afarago]

Thanks for working on this.

Some suggestions to improve it even more:

1. I think it would be better if the actions didn't overlap the logo. So we could make the actions aligned to the bottom or to the left and then have the logo be dynamically sized to fill the remaining space
2. I don't think "open existing project" is the best choice. If the project tab is already open, the button will do nothing. So it may seem to the user that the button is broken. Instead, I would suggest to provide a list of the 3 most recently used projects, if any, where clicking on one of the projects will open it.

Thanks for the prompt comment.

1. I played around with the layout, and started from the VS/VSCode welcome setup. Pybricks logo is nevertheless rotated... I am not sure I can follow the above Can you add a small sketch so that I get your layout proposal better?
2. As for the items I was trying to start from the [Feature] Quickstart for Pybricks Code support#1264 suggestion from Laurens, yet I love your idea. At the moment I could not find pybricks FileStorageDb storing or updating any timestamp. Any ideas to get that data?

export type FileMetadata = Readonly<{
    /** A globally unique identifier that serves a a file handle. */
    uuid: UUID;
    /** The path of the file in storage. */
    path: string;
    /** The SHA256 hash of the file contents. */
    sha256: string;
    /** The text editor view state. */
    viewState: monaco.editor.ICodeEditorViewState | null;
}>;

Like this?

[dlech]

Like this?

Pretty much. Although IMHO, vertically aligned and slightly bigger text would be more ascetically pleasing.

(I didn't spend much time on this, so text is probably a bit larger than what I had in mind compared to the scale of the rest of the app that isn't pictured)

2. Any ideas to get that data?

We could add a saga that subscribes to the file open/activate events that writes an array of file names where the currently viewed file always gets bumped to the front of the list. This way, we could avoid file metadata.

Or we could modify the DB to have a last viewed timestamp that gets updated by a similar saga. I don't really have a preference one way or the other at this point.

[laurensvalk]

Thanks for this one! To save yourself some time for future submissions, please do feel free to discuss a sketch or mockup first.

(...) recent files (...)

How about keeping this very simple? The linked issue is about users sometimes not being able to find the file menu when it is closed. Presenting a few recent files on the main screen does not necessarily solve that problem. And potentially amplifies it --- "I see three files, where is the rest?" Or people might think they have to close all their files just to open another.

There may be simpler possibilities:

---

Option 1: No new UI --- if Pybricks Code is opened, simply have the file menu open by default.

Also, if there are no files yet, show italic placeholder text Create a file to begin... at the location where the first file would be.

---

Option 2: All of option 1 and show the welcome tour if Pybricks is opened without any files.

---

Option 3: As discussed in the original issue and your initial PR.

I don't think the button would be doing nothing. It could just say either "Show files" or "Hide files".

---

After writing this down, I think option 1 makes sense, even independently from this issue. Since opening the file tab is needed in 99% of cases, this really should be the default.

The problem with option 3 is that it essentially duplicates two buttons, which is not ideal in any UI, so that was a bad suggestion on my part in pybricks/support#1264.

[afarago]

I guess we are back on the design board so might make sense to return to the pybricks/support#1264 issue to clarify and agree on a target set.
Shall we continue there?