Make it easy to switch preferred editor

[Zaczero]

Display a small check box like "remember my choice" which will edit the user preference whenever some button is clicked. Indicate which editor is the currently preferred one.

The goal is to:

• In dropdown, show a checkbox, when checked and user click "edit with" option, the server remembers users preference
• When dropdown is closed the checkbox becomes unchecked
• In dropdown list, the currently preferred editor is easily distinguishable (color, dot, anything that works)

[kkalata]

I've made the quick-and-dirty implementation (here is the code).
TL;DR: Before switching to editor frontend checks whether user wants to set it as the default one. If they does so, it makes an API request to change the default editor. Checkbox unchecking and default editor highlighting haven't been implemented yet.

[Zaczero]

Here are my thoughts:

• The remember my choice should be after the options, at the bottom
• Clicking on the label and not the checkbox closes the dropdown which is slightly unintuitive
• MutationObserver is not ideal, it's better to use Bootstrap-provided events
• I don't like the use of id attributes, perhaps just use data-editor attribute, this will also remove that FormData conditional
• You probably want to prevent navigation to /edit until the settings/editor request completes, otherwise it may get aborted too quickly.
• You don't need MessageCollector for update_editor, there is no possibility this could reasonably fail

This is a nice way to correlate labels with inputs. I can see the checkbox being changed now but it also closes the dropdown. Maybe you could set dropdown's autoClose to 'outside' and close it manually since we already have click event handler on the edit links.

<label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="remember-choice">
    Remember my choice
</label>

Tip: Here's some code for the inspiration which I wrote when preparing the above suggestions

const minEditZoom = 13
const navbar = document.querySelector(".navbar")
const editGroup = navbar.querySelector(".edit-group")
const editDropdown = editGroup.querySelector(".dropdown-menu")
const dropdownEditLinks = editDropdown.querySelectorAll(".edit-link")
const rememberChoice = editDropdown.querySelector("input[name=remember-choice]")
const loginLinks = navbar.querySelectorAll("a[href='/login']")

// Configure the remote edit button (JOSM)
const remoteEditButton = navbar.querySelector(".remote-edit")
if (remoteEditButton) configureRemoteEditButton(remoteEditButton)

// Add active class to current nav-lik
const navLinks = navbar.querySelectorAll(".nav-link")
for (const link of navLinks) {
    if (isHrefCurrentPage(link.href)) {
        link.classList.add("active")
        link.ariaCurrent = "page"
        break
    }
}

// Check for remembering user's choice before switching to the editor
const onDropdownEditClick = (event) => {
    if (!rememberChoice.checked) return

    event.preventDefault()
    const button = event.target
    const editor = button.dataset.editor
    console.debug("Changing user default editor to", editor)

    const userSettings = new FormData()
    userSettings.append("editor", editor)

    fetch("/api/web/user/settings/editor", {
        method: "POST",
        body: userSettings,
        mode: "same-origin",
        cache: "no-store",
        priority: "high",
    }).then((resp) => {
        if (!resp.ok) throw new Error(`${resp.status} ${resp.statusText}`)
        console.debug("Changed user default editor")
        button.dispatchEvent(event)
    })
}
for (const editLink of dropdownEditLinks) {
    editLink.addEventListener("click", onDropdownEditClick)
}

// Uncheck "remember my choice" checkbox when edit dropdown hides
const onDropdownHidden = () => {
    if (rememberChoice.checked) return
    rememberChoice.checked = false
    rememberChoice.dispatchEvent(new Event("change"))
}
editDropdown.addEventListener("hidden.bs.dropdown", onDropdownHidden)

...

Since you have started working on it, I'll assign this issue to you.

[kkalata]

Should "remember my choice" checkbox be visible for not logged in users because they can log in/sign up and set default editor at once, or shouldn't it be because they should be aware that the option makes a change on their account by seeing the relationship between the checkbox and the account dropdown? What about remote edit button, which just fires an event in external software?

[Zaczero]

Now that you said that, I think that if we hide the checkbox completely it will be unintuitive from UX perspective. How about we make it disabled, greyed-out. And perhaps we set a title="You must be logged in to perform this action" so it appears on long-hover.