Editor: Make "Stage" always appear at the start or end of sprite list

[towerofnix]

See this Cleanup Crew discussion: https://github.com/leopard-js/leopard-mentors/discussions/7

Then I noticed that Leopard sprites are folders, so I tried to add a new folder. I gave it a name, but when I press enter or click outside the name box the folder disappears.

REVISION: the folder does not disappear. It just moves before the Stage folder. That is misleading to me. If we don't want to mix sprites and stage, maybe the stage could be placed as the first element of the Project Files area, so that when the new sprite folder name is confirmed the sprite doesn't move around?

Now the "Project Files" list is really just a view of the top level of hierarchy, so I understand sorting it the same way as other views (folders first, alphabetic, then files, alphabetic)... but since it is analogous to Scratch's sprite list, it should come close to its behavior :)

Right now it is confusing that when you create a new sprite (folder), the input to enter its name appears at the end of the list, but after you press enter, gets sorted somewhere "magically" into alphabetical position. Most of the time (citation needed) this is before "Stage" and that causes confusion, because you appeared to be making a folder that would appear after "Stage".

I think we might want to drop the automatic alphabetization in the first place and just let users drag and drop to change the order of their folders, like in Scratch. But apart from that, a much simpler fix would be to just move the "Stage" folder to always appear at the start or end of the list, as @sfederici suggests in the linked cleanup crew discussion.

[PullJosh]

I agree that if this is confusing we should try to fix it.

As a guiding principle, I would like to try to make the Leopard editor a 50/50 blend of Scratch and popular JavaScript code editors like VSCode.

I'm not at a computer right now, but I believe VSCode sorts folders and files alphabetically like this?

I definitely agree with making it easy to create new sprites by adding a "new sprite" menu option. But I think I want users to have an explicit awareness of the folder structure, as opposed to hiding it away, because it matters a lot when you're importing code and so on.

Eventually I'd like to add a separate visual layout mode for the editor that makes it pretty much identical to CodeSandbox. My hope is that as people use Leopard more and more, they begin to "break out" of the Leopard project format and explore creating full static websites and so on. Essentially, the goal is to make Leopard the best possible transition tool from Scratch to JavaScript.

(I say all of this to justify why I think users should be aware of the directory structure as opposed to trying to hide it.)

[PullJosh]

There is precedent for little interactions that help navigate Leopard's particular format, though. For example, when you click on a Sprite folder it automatically opens directly into the Sprite's code file if one exists.

[towerofnix]

We totally agree on these fronts! Thanks for the outline of your perspective.

A hierarchy view of the entire project is going to be very helpful. We think a nice feature of, well, how the Leopard editor is already, is that all the user interface elements, though different-looking in shape, just represent ordinary levels of hierarchy. It would be nice to make this more obvious and help users get used to that—the very consistent use of folder icons does feel deliberate to this end.

We just wonder what else can be done apart from implementing the alternate layout mode (which we think is a good idea too). Maybe implementing the common file operations, in the context menu for each thing, and making sure those are universally available and use the same terminology, would help. Stuff like "duplicate", "rename", "move". Maybe a divider line and then "show in project tree", which shows a modal with a hierarchy-based layout (including the same file-management options), highlighting the folder/file you opened the context menu for?

[towerofnix]

What about adding "Project Files" to the very start of the path bar, and making the path bar absolutely always present, even if you don't currently have a sprite selected?

[sfederici]

I agree that, being Leopard a transition to Javascript, showing a clear folder structure instead of "black boxes" is good. And adding a "create sprite" option that will createe a folder is good too.

The only important thing at the moment is that the visualization is consistent, without moving things around in a non self-evident way.

Just to give another example: if you convert a project and open it in the Leopard editor, in the editor area you read "Select a file to start editing". So a new user, coming from Scratch, could think "what's a file?". Then, if you select a folder (that is a sprite) you see the javascript code file. But selecting a folder an then seeing as a consequence the content of a file is a bit counter-intuitive.

I think in this case the default Scratch behaviour could help: when the Leopard editor is open, the first sprite/folder is automatically selected, and the content of the js file is shown in the editor area.