Add user notes on accounts

[ClearlyClaire]

• Add a UserNote model
• Add note to Relationship entities in the REST API
• Add POST /api/v1/accounts/:id/note with a comment attribute to create a note (sending an empty comment deletes the note)
• Add UI
• Add Move handler to copy user notes to moved accounts, along with a short line stating the account has moved; merges the notes if the new accounts already had notes

EDIT: changed the PR significantly since its first submission, it is not tied to blocks/mutes anymore and the API and UI have changed to accommodate that fact

[ClearlyClaire]

Updated the design quite a bit:

[Gargron]

Add muting_reason and blocking_reason to Relationship entities in the REST API

So I remember when I brought it up when we were adding reblogs and notifications to follows/mutes that we need a different representation that's adequately hierarchical. Adding even more hierarchical properties into a flap map makes that need more dire, I think.

One idea is that you instead opt for a more generic "note" model where you can add notes about any users for yourself, and then you can update that note when muting/blocking. I don't see why blocking and muting necessarily needs a separate field for remembering the reason.

Another idea is adding a v2 of the API that organizes the properties in a hierarchical way the way I initially suggested it, e.g. { following: false } when not following or { following: { reblogs: false } } when following etc.

[trwnh]

One idea is that you instead opt for a more generic "note" model where you can add notes about any users for yourself,

I'd be in favor of this as well. #11797

also tagging #13548

[ClearlyClaire]

Yeah there isn't any reason to have separate notes for blocks and mutes. And I guess it could be made more generic as well and not depend on such actions at all, but I approached them with the angle of the Move handler adding mutes/blocks you may not know about.

Having something like a UserNote model would work and be less awkward API-wise but I'm not sure how it should look in the UI, and especially how to draw attention to it in case of mutes/blocks.

[brawaru]

@ThibG hm?

[ClearlyClaire]

@Sasha-Sorokin looks good, thanks! I'll try implementing that soon!

[Gargron]

Using Account's associations in any direction would shorten this code by a bit. I also don't like create_with too much. I would do find_or_initialize_by and then...

[ClearlyClaire]

Yeah, using associations might work, but the most useful association would probably be from the target_account side and I don't know what name to give it that wouldn't be confusing.

[Gargron]

Why are we calling it a "user note"? The association refers to target_account.

[ClearlyClaire]

In my mind, it was more “note set by an user”, but unsure of how much sense it makes. It was also to lower the confusion that using “Note” could cause since it's ActivityPub vocabulary

[Gargron]

Another comment about the UI: Could we not have the editing inline?

[ClearlyClaire]

I guess we could have inline editing, but I'm not entirely sure how the UI would look like. I think it being directly editable might be error-prone, and having it switch to edit mode without significant change to the UI (like, opening a dialog) may be a bit confusing.

[Gargron]

I was thinking like GitHub PR title edits.

[ClearlyClaire]

By the way, any reason we won't allow users to add notes to their own profiles? Feels useful to make reminders or note stuff smirk

No real reason, just put it in the menu where it seemed to make the most sense, and that was in a session specific to other people. But it might not even be the best place. Moved that upwards.

(I hope we're done with the bikeshedding 😩)

[brawaru]

I hope! Thanks so much for implementing this feature, you did great! Now waiting for a review and finally merging? :)

[SuperSandro2000]

I am not a designer but do we have such buttons anywhere else? Why do we need a blue border? Is there anything similar in mastodon already? I don't think so.

[ClearlyClaire]

We do have such buttons at least in the list column header. I don't know about the border.

[SuperSandro2000]

I would prefer the standard blue buttons. I think they fit better in the overall ui design.

[ClearlyClaire]

Honestly, I have had enough of the endless bikeshedding, and I don't think I'll consider any new design change that is not substantiated by more than a “I would prefer”. I, would prefer this to be merged.

[brawaru]

@SuperSandro2000 the blue ‘frame’ helps the note to really stand out and almost instantly get into your sight, so you be able to open the profile and instantly notice you have a note on it, without even reading it. The buttons we've got right now are just fine as they are: not too big, but enough sized to get noticed and clicked, and in very comfy position, I'd say.

Regarding to similarity, we've got almost identical buttons in settings, I believe, the minor difference is the hover effect, but I think it's even better than what we have in settings. And the note itself is somewhat similar to flash messages when you save stuff.

Thib did a really good job already on polishing it, so let's get this finally reviewed and merged, and then we can have issues open to revisit the design later, if you so desire, but I really don't see anything bad about it.

[SuperSandro2000]

without even reading it

Just marketing speech.

we've got almost identical buttons in settings

I clicked trough my entire settings and could not find any button that is looking like this but many of the regular blue ones.

let's get this finally reviewed and merged

If something is merged it will most likely stay this way a longer time. I don't think this looks good UI wise.

we can have issues open to revisit the design later

I don't think this will happen. They will be ignored or take a really long time to get anywhere.

and I don't think I'll consider any new design change that is not substantiated by more than a “I would prefer”.

Also if people react like this the UI will just stay like this for a long time and even if I would fix the 2px the buttons are off I don't have the feeling that it would be merged.

So you wanna do an A/B testing which button padding gets more user interaction? Or do we wan't to pump it trough light house and let it tell us that the contrast is 2% to little and the button has no aria label? We have no metric and just "I would prefer" and "I think".

I really don't see anything bad about it.

Something can be good and still not great UI design. If the note stands out because it is not to great UI design.

If you compare the spacing of the edit button with the spacing of the Ok and Cancel button you will notice that they are not the same and look a bit worse. Also I think the Cancel button on the left looked better and you can miss click it less. Also I would prefer a less noticeable color. Notes not always need to stand out that much if I just use them to write some general stuff down.

Honestly, I have had enough of the endless bikeshedding

I don't think this is bikeshedding at all. The UI is a big part of a web program and most users just decide purely on that. I am not arguing about variable names, code conventions or how you internally used divs, spans or p tags. How the feature looks is a significant part of the feature. Also I tried giving constructive feedback on a new feature instead of calling it bad and horrible.

[ClearlyClaire]

we've got almost identical buttons in settings

I clicked trough my entire settings and could not find any button that is looking like this but many of the regular blue ones.

Column settings, for instance lists, or notifications:

and I don't think I'll consider any new design change that is not substantiated by more than a “I would prefer”.

Also if people react like this the UI will just stay like this for a long time and even if I would fix the 2px the buttons are off I don't have the feeling that it would be merged.

ok what 2px now

If you compare the spacing of the edit button with the spacing of the Ok and Cancel button you will notice that they are not the same and look a bit worse.

They… are the same? Or I don't understand what you are talking about.

[SuperSandro2000]

Column settings, for instance lists, or notifications:

Didn't search there. I think they are fine.

I think it would look better if the buttons would be slightly more to the left. Not sure if exactly 2x but about. Maybe 5px.

[ClearlyClaire]

I think it would look better if the buttons would be slightly more to the left. Not sure if exactly 2x but about. Maybe 5px.

Well… the right edge is exactly the same as the “edit” one. And also as that of the textarea. It looks ok to me, but maybe the padding in the textarea itself throws you off?

[SuperSandro2000]

padding in the textarea itself throws you off?

I think this is the case. The inner text is not going up to the right most point of the save button.

[Gargron]

I'll merge it and tinker with the design later

[JohnyTheCarrot]

Sorry to bother, but what is the input character limit on this if any?

[brawaru]

2000 characters is the limit for user notes.