🚀 - Add support for multiple tabs

[micnic]

Which @codeimage/* package(s) are relevant/releated to the feature request?

codeimage

Description

As the title says, it would be nice to have multiple tabs, be able to switch between them and maybe be able to generate multiple images.

[riccardoperra]

Hi @micnic, thanks for your proposal!

Just to let me understand correctly, your idea is to handle multiple workspaces with his own configuration? I've made a quick mockup as example

It is possibly interesting, but obviously it will take some time since the application now expects a single workspace.

A few things come to my mind:

• How the export will be handled? For example, as a Adobe Photoshop/Illustrator user, I may expect that if multiple tabs/workspace are opened, the export modal would ask me which image I want to download. The browser could give problems, it usually blocks the opening of multiple tabs or downloads together (a zip download will be worse).
• The open button which will generate a blob and open a new browser window will not work where there are multiple tabs, unless you want to open only the current tab

Note: this proposal is a breaking change for these other integrations

• 🚀 - Import theme from Json #55: users will be able to open multiple tabs at once importing a json, just like opening a file
• 🚀 - OAuth authentication #240 users will be able to navigate between the tabs, but logged in user may be able to save them and reopen them later
• 🐞 - Query params are not updating after the first update #253 / 🚀 - Shorten url links #241: Query params may not be used anymore, must investigate for that

[micnic]

Here is a representation of what I have in mind:

In this way it's possible to display a little project and have a context of what files are available and what is the link between them. Tabs would be clickable and have their own code content.

Generating multiple images would be an optional feature, maybe to export them as an .zip archive, but generating for the current active tab is totally fine in my humble opinion.

[riccardoperra]

Ok 👍

This could be the style when the "tab accent" is disabled, what do you think?

One of the possible issue with this could be handling the style when there is no much space left. Do you think it is better to manage it with overflow-scroll or with an "Other" tab (maybe with the ellipsis-h icon) which show dinamically?

Example of container adapting tabs

[micnic]

I like this design for disabled "tab accent", would just remove the background of the + (new tab) button

One of the possible issue with this could be handling the style when there is no much space left. Do you think it is better to manage it with overflow-scroll or with an "Other" tab (maybe with the ellipsis-h icon) which show dinamically?

I am a fan of firefox's solution with tabs that do not fit in the width, but it would be a bit more work to implement and might be not that adequate for the minimalistic design of codeimage.