Improve UI of sieve filter

[nimishavijay]

Is your feature request related to a problem? Please describe.

Currently there we can add a filter/rule for incoming messages by using a GUI. However, it is quite technical as it makes use of the sieve syntax. Hence it can be intimidating for non-developers to add a filter.

Describe the solution you'd like

Make the sieve filter UI less technical by using more friendly language, reducing number of clicks and simplifying complex actions

The final result can look like this, however we can work towards it in stages

Initial state	While filling	After filling

Overall changes:

• [ ] "Create a new filter" heading
• [ ] Reduce the width to 600px
• [ ] Move Save button to same row as "enable filter"
• [ ] Have some predefined flags that for common actions like mark as read (seen), mark as important, adding a label, etc
• [ ] To reduce number of clicks, show a new condition and action already with dropdowns prefilled (currently we have to click on "New test" and "New action" and then select)
  • [ ] Condition: <nothing required for text field)
  • [ ] Action: <Move into folder>
• [ ] To make it easier to read, if a condition or action is not being edited, it can be shown in a readable summary like "Subject matches *planning"
  • [ ] An edit button on the side replaces the summary with the dropdowns for editing
  • [ ] Possibly a follow-up
• [ ] Move priority setting out of this modal, it can be set by drag-and-drop or up and down arrow buttons in the list of filters (similar to the app order feature in personal settings)
  • [ ] Also possibly a follow up

Wording and language changes:

• [ ] Remove helper text, it is quite technical. The fields should explain themselves or information should be shown as needed
• [x] allof (If all tests pass, then the actions will be executed) --> If all the conditions are met, the actions will be performed
• [x] anyof (If one test pass, then the actions will be executed) --> If any of the conditions are met, the actions will be performed
• [x] Tests --> If [all or any of depending on which radio button is selected] the conditions are met
• [x] Actions --> Then perform these actions
• [x] New test --> Add condition
• [x] New action --> Add action

Condition and action select fields:

• [ ] Move helper text into an i icon at the end of first row
• [ ] Move delete button to end of second row
• [ ] Select fields should have required prop. X button shouldn't be shown (assuming that the rule doesn't make sense if any value is not filled?)
• [ ] Add placeholder to value field "Enter text" and remove label "value"
• [ ] Add placeholder to folder dropdown "Select folder"

Wording changes for select fields:

• [x] subject --> Subject (capital S)
• [x] from --> Sender
• [x] to --> Recipient
• [x] is --> is exactly
• [ ] fileinto --> Move into folder
• [ ] addflag --> Mark as (depends on what flag actions are possible)

Describe alternatives you've considered

n/a

Additional context

n/a

[kra-mo]

Here are suggestions for a little update on the design to make it more structured and reduce its verbosity.

Most changes are visual, although there are some behavioral ones:

1. The "Enable filter" switch should be moved out of this modal, and a switch should be placed next to where deleting a filter is now instead. This makes it easier to toggle filters on and off and moves the action closer to a related one.
2. There is no explicit "Edit" action. Instead, conditions collapse into a single-line "entry". Clicking this expands them to their full editable size. Actions stay the same. This saves space the same, but reduces the shifting around of the layout and elements.
3. The info button for actions has been removed. These should explain themselves. For conditions, only pattern matching should be explained in the explanation text, the others should explain themselves, although we can provide short examples.

Initial state	While filling	After filling

Can't seem to be able to upload images to GitHub right now, so here they are on Nextcloud:

https://cloud.nextcloud.com/s/PQxFLwnKxELyCbM

[kesselb]

• allof (If all tests pass, then the actions will be executed) --> If all the conditions are met, the actions will be performed
• anyof (If one test pass, then the actions will be executed) --> If any of the conditions are met, the actions will be performed
• Tests --> If [all or any of depending on which radio button is selected] the conditions are met
• Actions --> Then perform these actions
• New test --> Add condition
• New action --> Add action
• subject --> Subject (capital S)
• from --> Sender
• to --> Recipient
• is --> is exactly

https://github.com/nextcloud/mail/pull/11210 (will be released as Mail 5.2 within the next weeks)

[DocSniper]

Many email providers only offer Sieve management through a web interface instead of the standard port 4190, which renders Nextcloud's automatic connection feature unusable.

To solve this, please add a "View Source" or "Export Script" button to the Sieve editor.

This would allow users to visually create and manage their rules within Nextcloud's excellent UI, then simply copy the generated raw Sieve code and paste it into their provider's web interface, effectively bridging this compatibility gap.