Bug: Improve the UI of the display name field on contact edit form (take 2: consistency and discoverability)
Status: VERIFIED
Priority: P1
Resolution: FIXED
Created: 2022-05-31 00:09:52+00:00
Resolved: 2022-06-14 23:34:27+00:00

+++ This bug was initially created as a clone of Bug #1770844 +++

Alex, could you (ask someone to) land a couple of strings for this just in case?
- `Display name` [label/tooltip]
- `Display name (click to edit)` [tooltip]
- ?
We might need those either as a label or as a tooltip. P1 because of strings needed.

Wayne and I have been looking at the new Display name implementation. More precisely, we were actively looking for it on existing contacts with a generated default display name, and for a long time failed to find it. We then started playing with the different list orders between `First Last`, `Last, First`, and `Display Name`. There might be a bit of newness at play, but somehow the user experience of this has remained confusing. Display name would seem present in unexpected and undiscoverable ways, and absent where it's expected. The problems are intertwined and not easy to describe. Let me try.

STR:
- in AB, have cards like the following:
  - First: John
  - Last: Doe
  - Display: Johnny
- Click `Change the list order` (icon next to search bar)
- Choose between the following sorting options:
  - First Last (FL)
  - Last, First (L,F)
  - Display name

## Problem 1: Custom Display Name not shown in card display with `First Last` or `Last, First` ##

**Actual**: For sorting modes `FL` and `L,F`, the card won't show the Display name unless you go to Edit mode.

**Expected**:
- for FL:
  ### John Doe ###
  Display Name: Johnny
- for L,F:
  ### Doe, John ###
  Display Name: Johnny
- for Display Name:
  ### Johnny ###
  Display Name: Johnny (?)

Rationale:
Display name is used both for display in message and when writing to the contact, so it would seem important enough to display that even if user currently uses a sort order not based on display name, i.e. `FL` or `L,F` (which looks like a very worthwhile scenario).

## Problem 2: Can't discover that Display name is editable ##

**Actual:**
There is near-zero discoverable indication that in Edit mode, the display name is editable.

**Possible improvements (also depending on solution for problem 3)**
- Permanent field border in edit mode
- Field border on hover in edit mode
- Add `Display Name` field label
- Tooltip: `Display name (click to edit)`
- Icon to focus Display Name field for editing
- ?

The solution for problem 2 relates to problem 3.

## Problem 3: Surprising change of contact title when switching to Edit mode (with FL or L,F sorting) ##

**Actual:**
Looking at my list using L,F, the name in the list shows as `Doe, John`.
Likewise, the name on the displayed card shows `Doe, John` as a title.
When changing to `Edit` mode, suddenly the card title changes, and becomes `Johnny` (the custom display name). This seems confusing. The card title should remain consistent even when editing. Display name should be shown as a separate field (maybe below the title based on the selected order, FL vs. L,F). 

**Expected:**
- Title should always display according to the chosen format/order for consistency between the list, the displayed card, and the card in edit mode.
- Display name should be shown separately, probably below the title.