Improve web editor homepage UX for a more (web)native feel

[noidexe]

(I know this a lot of work and that the web editor is not even released yet but I wanted to add it here so it doesn't get lost as a twitter comment)

Describe the project you are working on

Using Godot Engine Web Editor

Describe the problem or limitation you are having in your project

Importing projects is not ituitive

• To import a project you have to first pick the zip file, then start the editor(which starts the project manager) and your project won't be there, you have to click on import, pick the zip file and then choose a name and folder.
• To edit a project you have to first go to the landing page, then start the editor which launches the project manager and finally start your project
• To use an older version you need to click a link which shows an Apache Server directory view
  In general the experience of project management and creation doesn't feel native to the web and more like running a VM

Describe the feature / enhancement and how it helps to overcome the problem or limitation

The landing page will be redesigned and the project manager integrated to it. The user will be able to import, create, edit, run and manage projects directly from the landing page, skipping Godot's project manager.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

Project Import

• drag the zip to the designated area
• A new project with the zip name(plus a number in case of collisions) as project name and folder will be created automatically
• You get a popup: "Do you want to edit your newly imported project?"
• If you answer yes it opens the project in the editor (skipping project manager)
• If you answer no you stay in the landing page, which is convenient if you want to import multiple projects

Project Creation

• Click on "New Project" in the landing page
• A popup appears where you can choose a project name and optionally drop a project icon
• A new project is created automatically with the folder name based on the project name(plus a number in case of collisions)
• The newly created project opens in the editor (skipping project manager)

Project Management

• the project management interface will be recreated in html with only the options relvant to the web
• since you cannot move or rename project folders I'm not sure if having to pick a location makes sense. I think it should just show you the folder name below the project name as a unique id in case of having more than one project with the same name

Switching versions

• click on the down arrow next to the version in the nav bar
• select a version to be redirected to it
  Of course, versions prior to the landing page redesign won't have the drop down, but I see no way around it.

If this enhancement will not be used often, can it be worked around with a few lines of script?

It's not possible AFAIK

Is there a reason why this should be core and not an add-on in the asset library?

It cannot be implemented as an add-on

[Calinou]

The thing is that the current landing page is "universal" and is meant to be hosted on any website, not just godotengine.org. If we make our own customizations that assume that multiple versions are in place (for instance), we'll have to design a custom landing page. It will probably still be committed to godotengine/godot, but it won't be used by default.

Importing projects is not ituitive

• To import a project you have to first pick the zip file, then start the editor(which starts the project manager) and your project won't be there, you have to click on import, pick the zip file and then choose a name and folder.

The editor itself could extract the ZIP archive and scan the folder for projects once godotengine/godot#34444 is merged. With this in mind, I don't think there will be as much of a need to replicate the project manager UI on the landing page.

[Faless]

Let me start by saying that I really appreciate your mockup and your workflow design.
I totally agree the current project creation workflow is pretty bad on the web, and I probably should have included at least godotengine/godot#45705 in the web editor RC.

That said, it is important to remember that one of the goal of the Web editor is some form of convergence with the native one for two reasons: proving and improving Godot HTML5 exports, making sure that the user can switch from native to web version (and vice versa) as seamlessly as possible.

With that in mind, I think your critique is valid, but we should address it by improving the project manager and HTML5 export itself.

Some actions we can take:

• Allow restricting file system visibility to specific folders in the project manager (and maybe allow deleting projects for real).
• Expose an "unpack and edit" CLI argument, or make sure we can run scripts via CLI and do it via Create script API for reading and writing zip files godot#34444
• Allow plugins to run in the project manager Add support for project manager plugins #1482 (potentially interacting with Add a Script -> JavaScript interface to improve calling JavaScript code from Godot #1852)
• Expose better filesystem access to javascript?
• Themable project manger (not sure if it's doable already)?

EDIT: And of course, a proper documentation page for the web editor.

With this, one could still customize the editor template, potentially even exploiting more DOM facilities, while still trying to provide a close-to-native experience, especially in lights of having the editor as an offline PWA #1269.

[name-here]

One helpful addition to the project manager (especially helpful on the web) would be to have a button only in web builds that lets you upload a project zip/folder from within the project manager. This would make the "Preload project ZIP" button on the Loader page unnecessary.

Also, I just noticed that, when dragged and dropped into the project manager, projects appear in /tmp/drop-[NUMBER]/. Is that a bug?

[Faless]

I just noticed that, when dragged and dropped into the project manager, projects appear in /tmp/drop-[NUMBER]/. Is that a bug?

You can't use drag and drop in the web project manager for now. The reason, is that we need to copy the files from the OS to a temporary folder, and that folder gets deleted after the signal is emitted to avoid memory leaks.

The project manager does not handle that (while the editor itself does, copying the file to the project folder).
There is no easy fix for this without hacking the project manager itself specifically for the web (which I don't plan to do).
Could be done via #1482 (along with the upload button), or by hacking the web drag/drop handler itself.