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:
• 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
• 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

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:

• subject --> Subject (capital S)
• from --> Sender
• to --> Recipient
• 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