Reporting

Closes #441 (closed)

User reporting happens in a modal. The modal UI is basically similar to the MastodonFE. It filters all statuses of the selected account among statuses.allStatuses and shows them on the right side of the modal.

UserCard has Report button now. By clicking that button, the modal will be opened.

As per a chat with Feld, this is good enough to roll out at this round.

Things to consider

• Trigger the reporting modal from a status directly; Need discussion about where to put new action icon/button
• Optimize/Clean up the modal UI; Since all of the statuses inside the modal are from the same account, we can just focus on showing status messages.
• Implement infinite loading of statuses inside the modal; Currently, the modal shows statuses that the app fetched until right before the modal is opened. To view more statuses of the selected account, they need to find them using any timeline UI. They probably want to view all in the modal UI without extra efforts. However, this is less important.

Screenshots

• Modal UI

• Error State

• Mobile UI

• Report Button

added 1 commit

• c0adc89b - update generic error message

Compare with previous version

changed the description

added 1 commit

• 3d08a7d4 - update copy

Compare with previous version

resolved all discussions

unmarked as a Work In Progress

changed the description

At the first look, it looks good to me, except the Report button position.

We discussed the placement of additional buttons here (!607 (closed)). Please refer this and let me know if you have any thoughts on this.

Maybe we should get that DM MR merged first and then change this one to put the Report button in that menu?

code-wise looks good, maybe even too good.

how does it look on mobile tho

added 29 commits

• 3d08a7d4...277790e4 - 18 commits from branch pleroma:develop
• b4f40aa9 - add user reporting modal
• 6bb18df8 - add api service function
• a7232865 - add promisedRequest helper
• 97db9175 - add common error handling to promisedRequest helper
• 18cb86cb - reset modal state when userId is changed
• 7a870db3 - add processing state and close modal after api request is completed
• 294ddcf6 - reset modal state if api request is completed
• 4883cf59 - add error message
• 62a4a433 - add translations
• fccfabfb - update generic error message
• a7b47127 - update copy

Compare with previous version

added 1 commit

• 9a8849af - Add a css class to the checkbox indicator

Compare with previous version

added 1 commit

• d5e8cbc1 - Improve mobile layout

Compare with previous version

added 1 commit

• 4253b1ab - Improve mobile layout

Compare with previous version

changed the description

I've added a screenshot for the mobile layout.

I think the layout should be swapped on mobile. It is strange to see the posts being above the explanation of what the report function does.

Visually there's a few problems:

• the title/panel heading looks off
• the scrollbar overlaps the rounded corner and its shadow weirdly
• the submit button sits in a weird place

added 42 commits

• 4253b1ab...01d05316 - 29 commits from branch pleroma:develop
• d9baa66d - add user reporting modal
• f0ca69b5 - add api service function
• cf6e0530 - add promisedRequest helper
• 7da9f566 - reset modal state when userId is changed
• 6dcc5260 - add processing state and close modal after api request is completed
• b4270f43 - reset modal state if api request is completed
• fd027d07 - add error message
• ee40f0c7 - add translations
• 43fb281d - update generic error message
• 94865e4e - update copy
• dd98a057 - Add a css class to the checkbox indicator
• d914dc0a - Improve mobile layout
• 8210b1a6 - Update promisedRequest helper to support json payload

Compare with previous version

added 2 commits

• 018e3df6 - modal style improvements
• 0781174c - use custom scrollbar

Compare with previous version

added 2 commits

• 22d71b04 - prevent parent scroll
• c08ccb61 - fix double scrollbar display bug in mobile

Compare with previous version

changed the description

@shpuld I've updated the title and scrollbar items (using a custom scrollbar). Regarding the submit button, any suggestion?

@kaniini But I guess it is more strange to see the posts after the submit button. wanna totally new layout in mobile?

added 1 commit

• 118b7644 - fix panel title overflow issue in mobile

Compare with previous version

added 113 commits

• 118b7644...25370083 - 95 commits from branch pleroma:develop
• 3eea4b5d - add user reporting modal
• 2fe442e9 - add api service function
• 345150b3 - add promisedRequest helper
• a2e192de - reset modal state when userId is changed
• 932cef3d - add processing state and close modal after api request is completed
• 4575c3ef - reset modal state if api request is completed
• d99ab8ad - add error message
• 693747fd - add translations
• 3f727c57 - update generic error message
• 92a06cad - update copy
• 53695c13 - Add a css class to the checkbox indicator
• 9c1c818d - Improve mobile layout
• 5c4d82c1 - Update promisedRequest helper to support json payload
• 0bb5d343 - modal style improvements
• 8f38b3e6 - use custom scrollbar
• 8703fb06 - prevent parent scroll
• 31477ee9 - fix double scrollbar display bug in mobile
• 40558996 - fix panel title overflow issue in mobile

Compare with previous version

added 64 commits

• 40558996...ac28e8c2 - 46 commits from branch pleroma:develop
• a114ba51 - add user reporting modal
• 35313daf - add api service function
• c4893984 - add promisedRequest helper
• a915482e - reset modal state when userId is changed
• d992b341 - add processing state and close modal after api request is completed
• c7c0ca58 - reset modal state if api request is completed
• ca596f75 - add error message
• af6a6d98 - add translations
• 0ca80084 - update generic error message
• c2854e9b - update copy
• ce2fc01e - Add a css class to the checkbox indicator
• 5881e9e0 - Improve mobile layout
• 48e14409 - Update promisedRequest helper to support json payload
• 6b8d75bf - modal style improvements
• ddc83072 - use custom scrollbar
• 26309a97 - prevent parent scroll
• be27eb86 - fix double scrollbar display bug in mobile
• 0b06808e - fix panel title overflow issue in mobile

Compare with previous version

added 1 commit

• 17812e94 - rewrite checkbox component

Compare with previous version

added 24 commits

• 17812e94...8c7f765d - 5 commits from branch pleroma:develop
• 8288dc7e - add user reporting modal
• c515e148 - add api service function
• add9874a - add promisedRequest helper
• 3a5e7d18 - reset modal state when userId is changed
• a0b2b31d - add processing state and close modal after api request is completed
• 56c16eb4 - reset modal state if api request is completed
• b6c42995 - add error message
• 04891855 - add translations
• b113228e - update generic error message
• ac302bc7 - update copy
• 69907bb2 - Add a css class to the checkbox indicator
• 4dc90166 - Improve mobile layout
• ff3d9fa0 - Update promisedRequest helper to support json payload
• 3226915c - modal style improvements
• 59625bbb - use custom scrollbar
• 1210283f - prevent parent scroll
• 4f0205e9 - fix double scrollbar display bug in mobile
• 3dbc31cc - fix panel title overflow issue in mobile
• 06f12b7a - rewrite checkbox component

Compare with previous version

added 23 commits

• 06f12b7a...546ced43 - 4 commits from branch pleroma:develop
• 1355a120 - add user reporting modal
• 5cbda358 - add api service function
• 4bddbb7f - add promisedRequest helper
• 08c23639 - reset modal state when userId is changed
• f8b1fc92 - add processing state and close modal after api request is completed
• 6f02670a - reset modal state if api request is completed
• e7e3b7d7 - add error message
• 1112381e - add translations
• 5ec27ed1 - update generic error message
• c455d993 - update copy
• 680c9f3c - Add a css class to the checkbox indicator
• e8c430cb - Improve mobile layout
• 04ccef18 - Update promisedRequest helper to support json payload
• d74b9e14 - modal style improvements
• def12641 - use custom scrollbar
• 60a27010 - prevent parent scroll
• f2ef2d31 - fix double scrollbar display bug in mobile
• 7e3dd286 - fix panel title overflow issue in mobile
• d7efea40 - rewrite checkbox component

Compare with previous version

added 37 commits

• d7efea40...d94a7b63 - 18 commits from branch pleroma:develop
• 7cf40cec - add user reporting modal
• f6dc48f3 - add api service function
• a21accc2 - add promisedRequest helper
• 5063afeb - reset modal state when userId is changed
• 854a243e - add processing state and close modal after api request is completed
• c4113a75 - reset modal state if api request is completed
• 0d4d81ec - add error message
• 6f5bc055 - add translations
• 20cbd46d - update generic error message
• f0328669 - update copy
• 6a1d140b - Add a css class to the checkbox indicator
• f383660b - Improve mobile layout
• 793a814d - Update promisedRequest helper to support json payload
• 0210ede0 - modal style improvements
• 88c5d337 - use custom scrollbar
• ece9c785 - prevent parent scroll
• 3f7d0731 - fix double scrollbar display bug in mobile
• 464e589d - fix panel title overflow issue in mobile
• 1b0b9ded - rewrite checkbox component

Compare with previous version

added 56 commits

• 1b0b9ded...8c2efc5a - 37 commits from branch pleroma:develop
• 2e7f8bc4 - add user reporting modal
• 07f3c0cf - add api service function
• e63f8d50 - add promisedRequest helper
• cd10ab78 - reset modal state when userId is changed
• 89076001 - add processing state and close modal after api request is completed
• 17073e32 - reset modal state if api request is completed
• 9040052f - add error message
• 9508d294 - add translations
• c7b24540 - update generic error message
• da884da7 - update copy
• 6540d5e5 - Add a css class to the checkbox indicator
• 4c168258 - Improve mobile layout
• 8014e9f4 - Update promisedRequest helper to support json payload
• d70db764 - modal style improvements
• d1a1a6c2 - use custom scrollbar
• 976270ed - prevent parent scroll
• 5ced3233 - fix double scrollbar display bug in mobile
• f713a038 - fix panel title overflow issue in mobile
• 4c157862 - rewrite checkbox component

Compare with previous version

added 25 commits

• 4c157862...fa33e3ec - 6 commits from branch pleroma:develop
• b94824c5 - add user reporting modal
• eed54c73 - add api service function
• 1aa87697 - add promisedRequest helper
• 204d7f26 - reset modal state when userId is changed
• f281fa82 - add processing state and close modal after api request is completed
• 14caa6ce - reset modal state if api request is completed
• f64dd0a9 - add error message
• 5cb1c234 - add translations
• 889a68b3 - update generic error message
• f1b64b7b - update copy
• 73b82714 - Add a css class to the checkbox indicator
• e34698f1 - Improve mobile layout
• d36e3daf - Update promisedRequest helper to support json payload
• 6825368b - modal style improvements
• b3aa8394 - use custom scrollbar
• 3fb2c835 - prevent parent scroll
• 72f9638a - fix double scrollbar display bug in mobile
• 86214ac8 - fix panel title overflow issue in mobile
• 52e76566 - rewrite checkbox component

Compare with previous version

added 22 commits

• 52e76566...936eb23b - 3 commits from branch pleroma:develop
• 86ddc1b5 - add user reporting modal
• 2cc9f16e - add api service function
• 807f0809 - add promisedRequest helper
• 3e45a3eb - reset modal state when userId is changed
• 33098f40 - add processing state and close modal after api request is completed
• 471a80a7 - reset modal state if api request is completed
• c6d17fa0 - add error message
• 08467fd4 - add translations
• 6ce0b8c0 - update generic error message
• e8e7ce76 - update copy
• 9d459dc5 - Add a css class to the checkbox indicator
• d193510c - Improve mobile layout
• 2363f52c - Update promisedRequest helper to support json payload
• b514c8e4 - modal style improvements
• b396a3e9 - use custom scrollbar
• b3c4c13e - prevent parent scroll
• 319747eb - fix double scrollbar display bug in mobile
• 3e4cf7c0 - fix panel title overflow issue in mobile
• 83c49edc - rewrite checkbox component

Compare with previous version

added 42 commits

• 83c49edc...55410c91 - 23 commits from branch pleroma:develop
• 81c1bf97 - add user reporting modal
• e76cf0bc - add api service function
• 393421c9 - add promisedRequest helper
• e59d864d - reset modal state when userId is changed
• 75559c75 - add processing state and close modal after api request is completed
• b18d2a97 - reset modal state if api request is completed
• aa1937ef - add error message
• 0b13ff85 - add translations
• 0d50b274 - update generic error message
• 9da704d7 - update copy
• c755b9ee - Add a css class to the checkbox indicator
• 6b6194ce - Improve mobile layout
• a4689701 - Update promisedRequest helper to support json payload
• dab33f4c - modal style improvements
• dbb0fe59 - use custom scrollbar
• 3ca641a8 - prevent parent scroll
• d8b7e56f - fix double scrollbar display bug in mobile
• 1109b480 - fix panel title overflow issue in mobile
• 64f38d61 - rewrite checkbox component

Compare with previous version

added 21 commits

• 64f38d61...e9f4244b - 2 commits from branch pleroma:develop
• e30b8939 - add user reporting modal
• 21c60a22 - add api service function
• bce0deaa - add promisedRequest helper
• adb0567b - reset modal state when userId is changed
• b6e51b56 - add processing state and close modal after api request is completed
• 6f1f973a - reset modal state if api request is completed
• 4c4fe679 - add error message
• 3dad5700 - add translations
• d85bb982 - update generic error message
• c4de0e92 - update copy
• 9983975d - Add a css class to the checkbox indicator
• 821f70b7 - Improve mobile layout
• 61f7dc9e - Update promisedRequest helper to support json payload
• 5d685c4a - modal style improvements
• e642786f - use custom scrollbar
• 6ec145ae - prevent parent scroll
• 7ef0d15e - fix double scrollbar display bug in mobile
• 005ab61e - fix panel title overflow issue in mobile
• 86a1ec66 - rewrite checkbox component

Compare with previous version

added 66 commits

• 86a1ec66...ed0f10e9 - 47 commits from branch pleroma:develop
• a1dfadaa - add user reporting modal
• 41686427 - add api service function
• 0ea26ebb - add promisedRequest helper
• 6aa70ffc - reset modal state when userId is changed
• f4e451bf - add processing state and close modal after api request is completed
• f83508b9 - reset modal state if api request is completed
• bd5bc5cc - add error message
• 096a3f14 - add translations
• 1bbe8019 - update generic error message
• df02ebaa - update copy
• 33336bff - Add a css class to the checkbox indicator
• b7b0f43f - Improve mobile layout
• b64ad354 - Update promisedRequest helper to support json payload
• ed16f3e7 - modal style improvements
• aace8518 - use custom scrollbar
• 96413187 - prevent parent scroll
• 7d3fcce9 - fix double scrollbar display bug in mobile
• 6b5e9b3f - fix panel title overflow issue in mobile
• 62d06937 - rewrite checkbox component

Compare with previous version

UI wise only thing I'm worried about is the Report button adding more clutter and standing out as much as the others (especially with the new moderation button)

I'm thinking it might make sense to start putting secondary (and especially more negative) actions under a drop down menu, now that we have that popper as well used by the moderation menu, then we could just have the Follow button, and a "more actions" hotdog/ellipsis button next to it with all the other stuff. Probably not a good idea to do it here to not bloat this merge request but it would be nice to have done before a new release

added 66 commits

• 4e6ac76b - fix mess in UserProfile component
• e5d937a2 - add checkbox component
• 640d49d9 - add SelectableRow component
• 45b2d995 - use reusable List vue component instead of withList hoc
• d294e2f6 - refactor using List component
• b903dc96 - remove withList hoc
• b7127b41 - remove unused yarn package
• be419250 - rename selectable_row to selectable_list
• 02b7af51 - use SelectableList for blocks/mutes list
• cc01baea - save selected items to the state
• 57bcfd06 - use key properly
• a61acc50 - add some styling to the selectable-list component
• 5b5272d8 - move border-bottom style to the list
• faa16803 - add border-bottom style to the list component as well
• 72683c3d - refactor selectable-list using list component
• 16fb4b8a - clean up
• 8303f6ed - let not selectable-list know about getKey prop
• 57d5dac2 - show empty slot only if it has content
• ee3f0b74 - recover border between basic-user-card using list component
• b0972ce9 - remove border-bottom of the last list item
• 4251faa3 - add header to selectable-list component
• 4b960996 - support header slot
• f4f37e9e - add border-bottom to the header
• 2cae93ed - replace scope attributes by slot-scope
• ed9cfdc0 - add reusable progress-button cmoponent
• 874c5ac9 - add bulk action buttons
• 5eb509d7 - make border of list header thicker
• 42bbe6a8 - pass down empty slot
• 3f1ab329 - show list header only if there are items
• 639b077f - add a comment
• 36dd095c - wire up bulk action buttons to vuex
• 033352bb - add bulk mute/unmute buttons and wire up to vuex
• e80313c9 - clean up
• 7bdc9603 - ui improvements
• ae7339a8 - support i18n
• 281284cf - rewrite checkbox component as non-functional
• a2d647c3 - update checkbox importing path
• 2088a324 - import scss variables
• 0e5a9b18 - update model and props properties
• bcb64737 - render span tag only if it has content
• 10a9eb40 - support indeterminate checkbox state
• 75c847cb - make sure to use filtered selected keys
• 7f786b58 - clean up
• 5495a0e0 - fix typos
• 768c61cb - code readability
• 90ca03b3 - remove extra spacing
• 174b16bf - Revert "recover border between basic-user-card using list component"
• 59a0de91 - add user reporting modal
• 5c03e118 - add api service function
• 8a88a8b8 - add promisedRequest helper
• 241360cc - reset modal state when userId is changed
• 35a932db - add processing state and close modal after api request is completed
• 3dc9a716 - reset modal state if api request is completed
• 3a8ea444 - add error message
• fc7ae2ff - add translations
• 5abe9c12 - update generic error message
• b0cd554f - update copy
• bdef51d4 - Add a css class to the checkbox indicator
• a3ef0290 - Improve mobile layout
• ad5dcba0 - Update promisedRequest helper to support json payload
• 9657cf0a - modal style improvements
• 87c49a12 - use custom scrollbar
• 7e0c9443 - prevent parent scroll
• 525caf3f - fix double scrollbar display bug in mobile
• d1ba1537 - fix panel title overflow issue in mobile
• 26969fa0 - rewrite checkbox component

Compare with previous version

added 70 commits

• 26969fa0...61d04b88 - 51 commits from branch pleroma:develop
• 41a8bdc4 - add user reporting modal
• f475a461 - add api service function
• 673459a9 - add promisedRequest helper
• 8b6130f7 - reset modal state when userId is changed
• f07468f7 - add processing state and close modal after api request is completed
• aec77606 - reset modal state if api request is completed
• b4a03c06 - add error message
• 0e6a8969 - add translations
• 44f11d8a - update generic error message
• ee8cd09e - update copy
• 82d06bd5 - Add a css class to the checkbox indicator
• 01a399d0 - Improve mobile layout
• e31084b0 - Update promisedRequest helper to support json payload
• f4c7e21c - modal style improvements
• aeb44ed5 - use custom scrollbar
• ebf25dc2 - prevent parent scroll
• b1538c11 - fix double scrollbar display bug in mobile
• 62c79476 - fix panel title overflow issue in mobile
• f3ce35ee - rewrite checkbox component

Compare with previous version

added 35 commits

• f3ce35ee...c8f967d5 - 16 commits from branch pleroma:develop
• 4e312038 - add user reporting modal
• 8519a98d - add api service function
• d169ade8 - add promisedRequest helper
• 641136e8 - reset modal state when userId is changed
• daac55a1 - add processing state and close modal after api request is completed
• 34c927ff - reset modal state if api request is completed
• 87b851c3 - add error message
• e823a9b5 - add translations
• 1c53b312 - update generic error message
• a89d8e29 - update copy
• f78be5c1 - Add a css class to the checkbox indicator
• 6bae55b2 - Improve mobile layout
• b0560155 - Update promisedRequest helper to support json payload
• 52c30f81 - modal style improvements
• 03958c8f - use custom scrollbar
• 236049bf - prevent parent scroll
• c7d9bc3c - fix double scrollbar display bug in mobile
• fd59c34c - fix panel title overflow issue in mobile
• e54a2438 - rewrite checkbox component

Compare with previous version

It would be nice to get this merged soon.

i deployed this to pleroma.site with the fix i noted above and it seems to work well. yes, i agree that the action buttons are getting a bit crowded though.

added 1 commit

• 5879d935 - update api endpoint url

Compare with previous version

added 23 commits

• 5879d935...e351f863 - 3 commits from branch pleroma:develop
• 65a6a025 - add user reporting modal
• 6163708b - add api service function
• 23d4e940 - add promisedRequest helper
• 76e3f211 - reset modal state when userId is changed
• b6f5b368 - add processing state and close modal after api request is completed
• 6474f65e - reset modal state if api request is completed
• f7716e06 - add error message
• a9d6fc18 - add translations
• f4f1d147 - update generic error message
• 297fb38d - update copy
• fc181069 - Add a css class to the checkbox indicator
• 56693e43 - Improve mobile layout
• 21c7ae4a - Update promisedRequest helper to support json payload
• 66a61df6 - modal style improvements
• 9b77d963 - use custom scrollbar
• 48665ef7 - prevent parent scroll
• c792dd8f - fix double scrollbar display bug in mobile
• 4c982b9f - fix panel title overflow issue in mobile
• c02453c7 - rewrite checkbox component
• dd480c08 - update api endpoint url

Compare with previous version