Here is some experiment I started, when opening the Quadlet Create page, we get on a page with a Template tab, when selecting from the template, the template page disappear, and the tabs are replaced by the content of the templates.

Demo

A template is defined by a name, a description and a list of files. A file is defined as a name and content.

Enhancement ideas

Instead of having the Template tab, we could ask the user when clicking on create, if we want to create from a template of scratch (empty file).

Having a similar dialog that the Create on the Containers page.

The Tab component is pretty limited.. I cannot add context action (delete, rename). I may need to create a custom component.

Here is some experiment I started, when opening the Quadlet Create page, we get on a page with a Template tab, when selecting from the template, the template page disappear, and the tabs are replaced by the content of the templates.

Demo

Screencast.From.2025-03-21.17-20-37.mp4
A template is defined by a name, a description and a list of files. A file is defined as a name and content.

Enhancement ideas

Instead of having the Template tab, we could ask the user when clicking on create, if we want to create from a template of scratch (empty file).

Having a similar dialog that the Create on the Containers page.

The Tab component is pretty limited.. I cannot add context action (delete, rename). I may need to create a custom component.

I love the new redesign and it's intuitive.

The only thing I'm confused on that wasn't shown on the video is if you press the "X" / close on the top right while editing.

I would expect a dialog comes up to save it or something?

cc @cdrage here is another POC, with different design, and actions. More trying to be an editor

ℹ the branch POC https://github.com/axel7083/extension-podman-quadlet/tree/feature/projects

This is cool and I like the ability to edit multiple files, but feels a little rough around the edges to me, e.g.:

• I'm assuming the b9* hex code is just a dev artifact and we could have a better title.
• not sure what the edit icon on each tab does?
• adding icons to the tabs makes it harder to tell those are 'pages' and where they separate. removing the edit icon and moving the delete icon close might be enough? or maybe the tabs need a little redesign to work like this.
• the add file button really stands out and seems a little out of place ... but if it wasn't purple does it blend in too much?
• top right toolbar buttons are normally 'global actions' everywhere else, form buttons are normally at the bottom right.
• I don't know what Lock icon does?

Don't take this list to be negative :) just need to figure out the right UI pattern for this.

Don't take this list to be negative :) just need to figure out the right UI pattern for this.

I don't !! I'm glad you are helping ! I'm POC-ing a lot with this, so thanks for the details list.

Will keep you updated with the next iteration!

I was having fun with the svelte playground today, and here is what they editor look likes

You can edit filename by clicking on them, (not the most intuitive I would say)

I like a lot the <file +> icon

not sure what the edit icon on each tab does?

@deboer-tim yeah, we don't have a tree to see the content of the folder, so using the tabs is kinda the best I could found out

top right toolbar buttons are normally 'global actions' everywhere else, form buttons are normally at the bottom right.

I moved down the Load Into Machine action, but kept the provider selection at the top, (this is mandatory I need this value..)

Here is the updated, simplified version

For the tabs, I could add a File icon, to better indicate the difference with the traditional tabs in Podman Desktop

Here is an example

current branch for the POC https://github.com/axel7083/extension-podman-quadlet/tree/feature/create-page