provide more user-friendly address book editor

[aspiers]

Problem

The current text editor in the extension settings (built on the react-codeMirror library) is not user-friendly enough to be a good default UI. It treats each address book section as a multi-line text blob which has to be in a particular format and is parsed to extract entries. Downsides:

• It requires users to learn the format.
• Non-technical users are not accustomed to the concept of DSLs, even simple ones.
• If the parser validation fails, the user gets a somewhat unhelpful error message and has to figure out themselves how to fix it.
• The CodeMirror syntax highlighting yields undesirable and confusing artifacts (see #214) and makes it harder to add other hints during the editing process, such as duplicate entry detection (see #217).

That said, this interface is useful for power users:

• It allows quick manipulation of addresses in bulk via any text editor (e.g. search and replace on labels).
• It allows quick and easy import/export simply by copy and paste, or via the existing Fetch and Paste buttons.
• It makes it very easy to programmatically generate new lists.

Solution

Without ditching the existing text editor, introduce a new default UI for editing address book sections which is much more web-native. Instead of each entry being a line in a text area, it should be a row in a table-like UI layout. Each row should have:

• 3 columns of simple text input fields:
  1. one for addresses
  2. one for labels
  3. one for optional comments
• a delete icon for deleting the entry
• an addition icon for inserting a new entry below the existing one
• a drag handle for reordering entries

There would probably also need to be "add new entry" buttons at the top and bottom of the table.

Ideally it should also be possible to select multiple entries via checkboxes and do deletion or reordering in bulk, but that could be added later.

With this new UI as the default, onboarding should be much easier. It would also provide an opportunity for smoother onboarding, since the first time a user clicks on the "add new entry" button, it could display a tooltip telling the user that in future they are probably better off just right-clicking an address within an existing web page rather than adding entries here.