Sveltia CMS UI/UX improvements

[CarloBu]

Hello Kyoshino,

I've opened this discussion chat because I really like your app and I'm eager to see it improve further. I'll share my notes and ideas here on how you could enhance the user experience even further.

Starting with the list checkbox feature, I've noticed it's quite similar to the Strapi UI, which I appreciate. However, I find it distracting that the checkbox changes status after a user opens a list item and then returns to the list. Sometimes the checkbox appears as marked, other times it does not. This inconsistency resembles a bug. A better approach would be to leave the checkbox unmarked until the user intentionally clicks on it.

checkbox_action.mp4

[kyoshino]

I know the checkbox issue. It’s a bug. Will fix.

[kyoshino]

The checkbox issue solved in v0.27.2.

[CarloBu]

you even fixed this issue! YES!
I don't know why it bugged me so much, but I had an urgent need to uncheck it instantly after going back to the main list and seeing the checked list. :) I'm glad that you fixed this issue! 🥇

[CarloBu]

Regarding the split screen feature, I find it provides a very good user experience when users need to input content in two languages simultaneously. However, the synchronized scrolling, although functional, appears unresponsive and jumpy on my machine. Have you considered the idea of putting the two language fields together in the flex div and aligning all related fields horizontally?
I believe this would help users more clearly see fields related to the same topic. I've created a mockup to show how it would look with the two language fields side by side, aligning the fields horizontally.

split.screen.mp4

this is the current split-screen experience at least for me.

split.screen_curent.mp4

[kyoshino]

Not sure why this jumpy scrolling is happening. Will check.

I understand the concept but it’s kinda difficult thing because displayed fields and content may vary by locale (not 1:1) depending on the configuration, and the preview pane, which is not visible in your screencast, needs a different scrolling strategy.

[CarloBu]

Yeah, as I guessed the main issue is that the fields vary by locale and it complicates the 1:1 split screen matching. I guess that would involve some javascript that reads matched displayed fields' vertical height, picks the highest, and applies the bottom padding to a shorter field to match the same height to both sides, But that gets complicated when the rich text field gets involved. I understand the complexity of the feature and it takes too much effort to implement. There are more important features to tackle.

About jumpy scrolling, I was testing in Chrome on the local environment. I will check with different browsers on the deployed environment. Maybe this is only a local environment issue.

[CarloBu]

Regarding the integration of DeepL for one-click translations of text fields from another locale: this feature was a key reason I chose Sveltia CMS, and it's so cool that you offer this feature out of the box. However, it's odd that the translate button is somewhat hidden, detracting from its accessibility as a one-click feature. Because who would use this feature - use it a lot.
Could it be possible to make the button more prominent? Perhaps you could add an option in the i18n configurator that allows developers to choose where to display the translation button: either on individual fields or as a top button that translates all fields at once.
the possible yaml example:

i18n:
    structure: multiple_folders
    visible_all_translation_button true
    visible_fields_translation_button: true
    locales:
        - en
        - fr
    default_locale: en

This is how it could look like:

example of the sanity's google translate plugin. the demo preview I snatched from the internet:

Actually, I jumped from the sanity's CMS after the PlanetScale rug pull, I understood that I can't trust any corp to keep the generous free tier. When VC money dries up - the free tier disappears :)
To pay for services it's ok, I pay for many subscriptions, maybe too much for too many, but it would be hard for me to explain to the old client - a small business owner, to pay an unexpected extra 30-100usd per month just because one corp changed their mind.

The so generous cloudflare offering also worries me, but I guess it's easier to change hosting provider than the CMS with all the integrated database. :)

[kyoshino]

I agree. The translation functionality is a bit hard to find. I’ll add a button as you suggested.

[CarloBu]

awesome!
but I still suggest giving at least one option for the developer to show or hide the translate button. Because I guess for some or many it's not needed and it clusters the UI. but when it's needed - it's a killer feature. Many other CMS keep this auto-translate function under the paywall and you give it for free :)

i18n:
    structure: multiple_folders
    visible_translation_button: true <- the option to opt in or out to show the translation button in UI.

[CarloBu]

Marked required fields is a good idea, but I am afraid the red alert mark distracts and stresses the user because it gives the impression that the user made a mistake already. Also it visually mixes with a legitimate error message and doesn't give a clear contrast where the mistake was made.
Like in this example, you can't instantly figure out that the description needs the attention, and the title field is correct.

Would you consider putting a red asterisk instead, like GitHub UI? It clearly informs what fields are required, but doesn't stress the user about it too much.

[kyoshino]

I was thinking about this. In Japanese, the required label is two characters, but it’s too prominent in English, so I thought I would at least change the label to ”Req.” but yes, a red asterisk is common and better. 👍🏼

[CarloBu]

perfect 👍

[kyoshino]

This change has been made with v0.27.0.

[CarloBu]

I like this new required field marking very much! Now even when I squint my eyes, I can clearly see where I need to focus attention.

edit:
After a second look, I appreciate the character count implementation and its placement. 👍
Internally I'm curious about how some small design tweaks might look. If I find something worth sharing, I'll post it here for your feedback.

[CarloBu]

And again, I'm sorry for bugging you with these nitpickings. These are really small issues overall, but I think they are still worth addressing to enhance the overall functionality and user experience of the awesome CMS.

[kyoshino]

No sorry! There are still many UX issues in Sveltia CMS. For example, there is currently no confirmation or undo option when you remove an object (#139 has an example, actually) or a list item. I want to solve all the small and big things one by one before reaching GA. So don’t hesitate to suggest changes!

[kyoshino]

One big thing on my table is decaporg/decap-cms#3821.

[CarloBu]

Then perfect, I have quite a long list of what I guess what could improve ui/ux/dx :)

about #139 example, I didn't understand your issue with "the option when you remove an object"

this works nice for me, when I uncheck the checkmark - it does not include the news description, because it's not present visually. It follows the visual user flow guidance. It works for now for me as it is

[CarloBu]

Oh yes, addressing decaporg/decap-cms#3821 would indeed improve the user experience significantly.
edit:
can't wait to see how you solve this issue. There are a lot of moving parts involved.

[CarloBu]

quick note that the radio button is shifted a little bit

[kyoshino]

Hmm, this looks fine on my monitor. The inner blue circle is centred both vertically and horizontally. 🤔

[CarloBu]

Strange, for me the radio button blue dot is shifted randomly to the right or left. That means this is my machine issue, wrong alarm :)

[CarloBu]

Hi, kyoshino,
I found the visual bug of the hint:

the hint looks good at a small width, but with a wider width, the hint stays on the left side and doesn't stick to the text field.
Could the hint be placed in the character count div?

That would be the visually clean solution. In this case, both information sides would be at the same horizontal level, but then you would need to address the issue with overlap, and limit the width to not overlap with the character count if it exists.

Additionally, neither the character count nor the hint is present in this field configuration. Is my configuration wrong?

    fields:
      - label: 'Is it News?'
        name: 'isNews'
        required: false
        widget: object
        i18n: duplicate
        fields:
          - label: 'News Description'
            name: 'newsDescription'
            widget: string
            i18n: true
            fields:
              - {label: News Description, name: newsDescription, widget: string, required: false, i18n: true, maxlength: 70, hint: 'A short news description'}

Sorry for the additional issues and bugs caused by my requested character count feature

[kyoshino]

Will check!

[kyoshino]

Additionally, neither the character count nor the hint is present in this field configuration. Is my configuration wrong?

This is due to a configuration error: the nested fields is unnecessary. It should be:

    fields:
      - label: 'Is it News?'
        name: 'isNews'
        required: false
        widget: object
        i18n: duplicate
        fields:
          - label: 'News Description'
            name: 'newsDescription'
            widget: string
            i18n: true
            required: false
            maxlength: 70
            hint: 'A short news description'

[CarloBu]

oh yeah! Somehow I messed this up. That was a stupid mistake. thank you!
Interestingly your cms worked even with my nested/nested field perfectly, but I found that something was wrong when I wanted to add the hint.

[kyoshino]

The layout issue solved in v0.27.2.

[CarloBu]

super, now it's looking very nice!

[CarloBu]

edit:
I was writing about the lack of a clear formatting option in the rich text editor, but I checked popular industry standard CMSs like Sanity or Contentful, and they also do not have this option. It means that I was trying to solve a non-existing issue. :)

I want to ask about a rich text editor. As I understand, you are using Lexical as a markdown text editor. I can see it's a very powerful tool. Can I ask if there are technical difficulties in adding the option to insert images in the markdown? The playground shows it has built-in capability.

[kyoshino]

Yeah, the output is the same and simple; it’s Markdown anyway, but the UI is a bit complicated thing in the CMS 😆

[kyoshino]

I’ll work on it by the end of this month or early next month.

[CarloBu]

no pressure, personally I don't need this feature right now, but it will be a handful for future clients. Happy that this feature is on your to-do list.
Hehe yes, markdown is so simple and when I opened the Lexical playground, I saw so many cool stuff users can do, I was surprised that it supports the grab feature that the user can grab the image and move through the text. it felt like the ms Word app.
I thought why not just copy-paste the code and call the day, but then It struck to me that the Lexical playground was made in... React :)

[laril]

This apparently is still missing. Do you still have plans to add this?

[kyoshino]

Yes. #156 is the tracker.

[CarloBu]

I want to visually divide collections between main and component references like tags and similar. I'm planning to create a dummy collection with a "—" name to make some sort of workaround, but would you consider adding a visual divider? to be like this:

the sanity CMS example of dividers (I like the divider margins, it gives good spacing):

collections:
  - name: blog
    label: Blog
    fields:
    ...
  - name: pages
    label: Pages
    fields:
    ...

  - divider: large <--- the visual divider,  maybe to give two options: small - divider with a small margin, large - divider with a big margin
 
  - name: tags
    label: Tags
    fields:
    ...

I didn't find this issue raised anywhere in decap github, so I'm aware that it is low low-priority feature.

[kyoshino]

I think this can be done quickly. Maybe two options are unnecessary — divider: true would be fine 🙂

[kyoshino]

Just shipped v0.28.0 with the fix!

[CarloBu]

Awesome!

thank you very much for spending time to improve even a small UI element.

now the collection list looks great.

P.S. draft backup is a huge improvement!! 👍

[CarloBu]

Uh, here I am again posting—can't give you a break :)
Disclaimer: I'm sending my observations on how the field UX could be improved. These are just my suggestions(opinion) and not dealbreakers. If you find my perspective logical and it's not too difficult to implement, you might find these ideas useful.

Regarding the top-level arrow function: I find this arrow button function suboptimal because it hides the entire collection of fields, which could confuse clients into thinking the fields are gone. Instead, it would be better to collapse all child fields rather than hide them entirely, allowing them to be expanded again with single button

The name of the key "title" is common but not always reflective of the contents. In this case, the key name is "key" and the client is not able to see the collapsed field name in the cms. Or the developer is forced to use the "title" name for every collection. I propose using the first string key value instead if the "title" key is not present.

Additionally, is it possible to record the scroll position and then recover it after an action is taken?

the video to see these issues in action:

fields_UX.mp4

P.S. I see you fixed the collapsed fields bug when entering the same collection for the second time, I appreciate that.

[CarloBu]

Damn, I didn't manage to reply to you in time, and you've already fixed it. :) 🥇

Personally, I can't imagine any scenario where it's beneficial to entirely hide the field collection. I find that only Netlify CMS started this strange option. It stuck there, but no other CMS (as far as I know) allows hiding the entire collection without any glimpse about the hidden structure. I'm aware that this is just my opinion. On the other hand, your goal is to make Svelita a replacement for Decap/Netlify CMS. I understand and respect that. Getting rid Netlify CMS "features" could upset some users, I get that.
Anyway, the expand and collapse button is a great addition. It's now very handy to sift through large collections, and it's super intuitive. Well done 👍

After you ship 1.0 it's a must to create the interactive online demo (without any login) of your CMS. From only screenshots and description, it's hard to grasp how more functional and modern it is compared to the decap cms.

summary
I didn't realize I could use a summary for this empty collapsed fields. Thank you for the tip. I will use it for detailed information when needed. Awesome that you added the first string value. 👍

I'm glad that you fixed this collapse bug; it was really annoying. But wait, I have more bugs for ya ;)
I don't know if it's a bug per se or if my schema setup is wrong, but in the nested collection schema, new fields collapse or even hide the add button. I guess the entire field hide/collapse state management has become very difficult.

the setup:

collections:
  - label: Main Test
    name: mainTestCollection
    create: true
    folder: src/content/mainTest/
    fields:
      - label: "Main Company Data"
        name: "mainRequisites"
        widget: "list"
        fields:
          - label: "Main Requisite"
            name: "mainRequisite"
            widget: "list"
            fields:
              - label: "Title"
                name: "Title"
                widget: "string"

I recorded the behavior:

fields_hiding.mp4

[kyoshino]

After you ship 1.0 it's a must to create the interactive online demo (without any login) of your CMS. From only screenshots and description, it's hard to grasp how more functional and modern it is compared to the decap cms.

Will do, of course, as mentioned in the readme (“demo site”).

I'm glad that you fixed this collapse bug; it was really annoying. But wait, I have more bugs for ya ;) I don't know if it's a bug per se or if my schema setup is wrong, but in the nested collection schema, new fields collapse or even hide the add button. I guess the entire field hide/collapse state management has become very difficult.

I actually noticed the expander problem with nested lists last week. Will try to solve it in the next round of bug fixes. 🤞🏼

[CarloBu]

Will do, of course, as mentioned in the readme (“demo site”).

That's great! I read the README before, but there were just two words: "demo site." I got the false impression that it was a demo site starter project.
I'm happy that it will be an interactive demo CMS site where guests can go and try the interface without any setup effort, like Decap did. 👍

I actually noticed the expander problem with nested lists last week. Will try to solve it in the next round of bug fixes. 🤞🏼

godspeed 👍

[kyoshino]

The expander issue fixed in v0.29.3

[CarloBu]

Again... very fast 🥇
As far as I see, you fixed all UI bugs. It works perfectly now 👍

[CarloBu]

I finally tried the translate function from DeepL. The translation quality is good, but from my short experience, I found Google Translate works slightly better. However, the setup was very easy, much easier than getting the Google Translate API key.

I have a few suggestions about the translation behavior. These suggestions are based on my opinion, but I believe they are logically sound.

The proposal is to expose only top-level "Translate from ..." buttons to the client, such as "Translate from language1" and "Translate from language2."
When the client clicks on these buttons, the CMS sends the text for translation only if the original field text is present and the target field text is empty. The target fields that already contain text do not get translated because the client has either entered their text or copied it from the original language. There are many situations where certain fields, like location names or any other objects that are not translatable, should not be altered.

The workflow: the client fills all fields in their original language, then looks for the easy-to-translate target language fields on the right, adds other information, and when they need to fill the rest, clicks on the translate button. The CMS then translates only to the empty fields.

Here is an illustration of how I see the flow: translate from the left to the right..

1. The client fills all fields in their original language.
2. The client looks for the easy-to-translate target language fields and adds additional information.
3. The client clicks the translate button, and the CMS translates only the empty fields.
4. If the client wants to override a specific target field - click on the specific field three buttons, and then translate and overwrite this field.

I don't think the override behavior is optimal. If the client wants to translate a specific field, he can empty the target location field, then click the main translate button, or click on the specific target field's three dots, select "translate the specific field," and overwrite it.

This new workflow would also prevent the client from accidentally overwriting the prepared translated fields. It translates only the fields that are needed—those that are empty—thereby streamlining the entire translation process. With one button to translate all fields without overwriting existing text, the process becomes more efficient.

this is the current translation behavior:
https://github.com/sveltia/sveltia-cms/assets/145860771/933777e9-df23-4c35-b3df-b47f7d7a3f23

TLDR the main translate button should not override the existing text. The three dots translate button for the specific field should overwrite that specific field.

@kyoshino, what do you think? Do you have feedback from clients about the translation button experience?

[kyoshino]

You’re right, overriding strings shouldn’t happen with the top-level translation menu item. It’s probably fine if you translate each field, though.

And yes, I’ll be adding the translation button to the top toolbar.

Other translation providers may be added in the future, including Google, Amazon and Microsoft.

[CarloBu]

You’re right, overriding strings shouldn’t happen with the top-level translation menu item. It’s probably fine if you translate each field, though.

YES!

And yes, I’ll be adding the translation button to the top toolbar.

Awesome!

Other translation providers may be added in the future, including Google, Amazon and Microsoft.

Triple Awesome!!! :)

[kyoshino]

The translation issues fixed in v0.29.3 🌎

[CarloBu]

Now it's working perfectly! Thank you!

[CarloBu]

Just checked v0.31.0 release. Yay! You made it! 100 Decap issues fixed! That is more than impressive! Congrats!

I'm interested; can you share where your focus for Sveltia CMS will be in the near future? Fix more Decap issues, add features?

Right now, I'm populating the website with new data using Sveltia CMS, and the experience is awesome! It works so smoothly. I like the local backup feature a lot because if I need to add a new reference for a project, I can just exit the project/post, create the reference, and then go back to finish the project/post. So cool. However, I made some typos in the project/post title, and when I fixed the title, the slug stayed the same.
slug: {{title | localize}}
It's not hard to update the slung manually, I just wanted to inform you that the slug does not change after the title is modified.

[CarloBu]

After thinking about this slug edit issue, I realized that it creates a lot of hassle to implement it. However, after reading your decap reading, I understand that the inability to edit slugs is a deal breaker for some.

Regarding image assets, I previously discovered but forgot to mention that the Sveltia CMS does not sanitize imported image filenames. Some special characters and empty spaces can cause issues. I would suggest that the best practice would be to use the same slugify logic for imported image assets.

[kyoshino]

No worries, I was planning to implement the renaming functionality for both entries and assets anyway.

Re: the asset file name, I’ve recently added simple normalization code because some Japanese characters cause problems especially on macOS. But otherwise, keeping the original name is intentional.

• Image Filenames are Transformed into all lower-case decaporg/decap-cms#4288

Later I’ll add a config option for this so that slugification can be applied if needed.

[CarloBu]

I see, the forced filename transformation can break things in established projects.

[kyoshino]

Sorry, I’m pushing back the slug editor until next month so I can implement some missing Netlify/Decap features first. Hopefully there won’t be many situations where you or your client need to rename slugs. 🙇🏼

[CarloBu]

Hi, sorry for the late reply, I have been on vacation.
I will ask clients to pick titles carefully, so there is no problem, it was nice to have a feature, but not that important.
As I can see you have a busy time with other tasks :) I can't wait to see Decap features, 👍

[CarloBu]

I really like this feature:

When there are 5 or fewer options, the UI switches from a dropdown list to radio buttons (single-select) or checkboxes (multi-select) for faster data entry

However, I find the number 5 to be arbitrary. I would prefer to let the developer decide when to use a dropdown list and when to use radio buttons or checkboxes. For example, when I added one more relation item, I was forced to use a dropdown menu. I don't think it's useful to use a dropdown for just 6 items either.

Here is my proposal to add a variable for the developer to change the default number 5 to any value:

      - label: Project Status, 
      - name: status, 
      - widget: relation, 
      - dropdownThreshold: 6             <- or optionLimit, maybe toggleLimit
      - collection: projectStatus, 
      - value_field: title, 
      - display_fields: [status]} 

[kyoshino]

Makes sense. The threshold can be increased from 5 if the option labels are shorter. Will add the option to the next update.

[kyoshino]

The new option added with v0.31.1.

[CarloBu]

awesome!

[CarloBu]

Hey Kyoshino,

I'm here again with another proposal. :]
In i18n, the two sides do not align horizontally for understandable reasons. It would be nice to visually inform the client where the same field is in the other language.

My proposal is to add a thinner subtle focus ring to the mirror field in the second language to visually inform the client about the corresponding active field in the other language. It would be a nice subtle touch.

something like this:

What do you think? Would it be worth the hassle to implement? In my humble opinion, it would not be too hard to implement, but I might be wrong. I'm not familiar with svelte.

[CarloBu]

Oh, right. Basically, it's just these three dot menus that are causing the horizontal misalignment. Adding dummy padding for the read-only field would fix this issue for good. 👍

[kyoshino]

Fixed the field height inconsistency with v0.31.1.

[CarloBu]

thank you!

I feel bad for nitpicking and bothering you with these micro issues, but it feels nice to see aligned fields :)

[kyoshino]

There are still small differences in some cases, but overall it’s better than before 😉

[CarloBu]

for sure!

[CarloBu]

Hey, I have one more feature request.

I created a project list, but projects don't have thumbnails because there is a list of image objects with alt text.

      - label: Project Images
        name: images
        widget: list
        fields:
            - {label: Image, name: src, widget: image}
            - {label: Alt Text, name: alt, widget: string, hint: 'image description'}

It would be nice to have thumbnails like this:

Would it be possible to check for the first image in the object and show it as a thumbnail? In Sanity CMS, it's possible to use an image from the object as a thumbnail, but it requires additional schema setup.

Maybe instead of scanning all nested fields for images, it's easier to add some sort of flag on the image object field to use that image as a thumbnail.

      - label: Project Images
        name: images
        widget: list
        thumbnail: true     <--- the flag to pick the first image and use it as a thumbnail
        fields:
            - {label: Image, name: src, widget: image}
            - {label: Alt Text, name: alt, widget: string, hint: 'image description'}

[CarloBu]

yeah, it's possible to add aditional info now, but it's not the most readable:

summary: "{{title}} - {{category}} - {{date}}"

[kyoshino]

Yeah. Will work on it soonish 🤞🏼 It could just be a simple option:

columns: [title, category, date]

[CarloBu]

I just read your links.
the Decap issue: austincondiff gave some really good ideas, but it's sad that Decap wasted the opportunity.
I like how Contentful's table looks and feels. They really polished the overall UX, and it's so advanced. It's not surprising they can charge $300 for the "Basic" plan. :)
Oh boy, I can't stand anything WordPress... pass :)

[aloxe]

sorry @CarloBu @kyoshino but I didn't get what was needed to display the thumbnail in the list like I see in your screenshots. I tried the [CTnHWghmFANIefO7tgcUhm](name: "thumbnail") and thumbnail: yes but without success.

[kyoshino]

Is this your CMS config? Then replace thumbnail: true with thumbnail: thumbnail and it should work.

[CarloBu]

Sveltia CMS is an awesome git-based CMS, but I still miss Netlify Identity. :/
I'm looking for a Netlify Identity alternative solution; I don't need advanced functions like mail servers or password resets. Just a hardcoded username and password for the server to securely handle authentication. It wouldn't be safer than GitHub auth layer, of course, but it would be safe enough for a small business to log in and manage the site without a GitHub account.

Do you have some references on this?

[kyoshino]

I have asked my clients to create a GitHub account to use Sveltia CMS, but I know it’s not a great UX. The sign-in process is required only once though. This is what I have mentioned in the README:

The Netlify Identity Widget will not be supported, as it’s not useful without Git Gateway. We may be able to support it in the future if/when a Git Gateway alternative is created.

The Identity Widget support itself is probably simple. Or I could use Auth.js or whatever.

What’s really needed is a Git Gateway alternative, which would probably be a GitHub application or bot. If it’s not too hard to create, I’ll work on it before the 1.0 release.

[CarloBu]

Yeah, asking the client for a GitHub account is not the best feel, but at least I can tell that GitHub provides the top-notch security of the website.
As I also understand, the custom barebone implementation of git gateway auth is not that hard, but when you start to account for security like user permissions management, monitoring, and logging activities, login rate-limiting, ddos... That's a total headache.

[CarloBu]

Hey, Kyoshino, this is such a small issue that I write here.
is there some way to render the date correctly?

I use this setup:

    summary: '{{title}} - {{date}}'
    fields:
      - {label: Publish date, name: date, widget: datetime, i18n: duplicate}

[kyoshino]

Will check.

[kyoshino]

You can use Summary String Transformations like this:

summary: "{{title}} - {{date | date('lll')}}"

The format follows moment.js (Sveltia CMS will migrate to day.js soon but the format should be compatible)

[CarloBu]

omg, it was just simple, thank you for the help. Next time when the issue comes, I will look deeper in the decap docs.
I was sure the date issue was a sveltia specific.

[kyoshino]

Aha, the summary description doesn’t link to the transformations page. The Netlify/Decap CMS docs are poorly written and organized. Actually, Static CMS does a better job. Sveltia CMS should do much better 😆

[CarloBu]

Hi, I have a few small UX improvement ideas that would not be easy to implement.
Personally, I feel that step 3 feels redundant. After selecting the file and clicking on the open "button" the user goes back to step 1 with the current file, then there are two options: cancel or insert. If I selected and opened the file, I of course want this particular file to be inserted. I think in this case when the user can't select more files in the same time, step 3 is not needed and the Sveltia could just go straight to step 4 by skipping step 3.

.
.
And it would be nice to see the total number item number of the collection

[kyoshino]

Solved in v0.39.18 + v0.40.0 😄

[CarloBu]

I initially thought of reducing it from 4 steps to 3, but you've managed to condense it to just one step. Very nice! :)

[CarloBu]

Hi, I have another UX suggestion.
I'm currently using automatic_deployments: false, which is great because it allows users to make small changes without worrying about hitting deployment limits. However, it becomes an issue when the last change is made, and the user forgets to click on the arrow and select "Save and Deploy."

In such cases, the only way to deploy is to go back and make a meaningful change to trigger the deployment.

My suggestion is to add a feature that checks if the last update was made with the [skip ci] flag. If so, the system should display a "Deploy Changes" button on the main page to allow users to trigger the deployment manually.

then show the "Deploy Changes" button on the root page to trigger the deploy

Sveltia could add or remove a comment in the config.json file to trigger the deployment.

[kyoshino]

It only appears when the automatic_deployments option is set, but well, it’s misplaced 🙃

[CarloBu]

oh, so then it could be moved to a separate button. When using manual deployment, the visible deploy button is useful.

[kyoshino]

Will make the change today.

[kyoshino]

Shipped v0.40.4 with this change. There is a known bug though: if the last commit had [skip ci] and deployment was then triggered, the publish button should be disabled, but currently it remains enabled. I’ll look into how to fix it later.

[CarloBu]

Awesome, it's good as it is right now. If I'm not mistaken, you have some ideas to show the progress information of the deployment at some point in the future.