Add Blocks / Mutes management tabs under user settings page

As the first part of #227 (closed), this will add Blocks / Mutes tabs under user settings page. A user can block/unblock/mute/unmute the others in the tabs.

mute* here is mute* via PleromaFE here. I will rename the tab and action buttons along with the other parts of the application via a separate MR. (We are discussing to rename the current mute - PleromaFE mute.)

Mutes tab is not functional at the moment because of the related apis are not ready or functional.

• fetch -> /api/qvitter/mutes.json
• update -> /api/qvitter/set_profile_pref.json

BE also doesn't support MastodonAPI mutes*, so I couldn't support MastodonAPI mutes for now. I will revisit once BE is ready (pleroma#482 (closed)).

I want the original issue to be done in reasonably sized chunks when possible. The other possible features such as multi-deleting and searching can be done in separate MRs.

Technical note: I added a new reusable BasicUserCard component which has no business logic except toggling view and several higher order components to reduce code repetition and improve code organization. block-list and mute-list components are composed using them. We can refactor the existing follow-list and the other user lists using them.

Screenshots:

UI:

Block/unblock: ezgif.com-crop

added 1 commit

• d08bb7a0 - Add missing translation strings

Compare with previous version

added 42 commits

• d08bb7a0...4f953710 - 18 commits from branch pleroma:develop
• d15a4322 - Add withLoadMore hoc
• 5c748e21 - Add reusable BasicUserCard and UserList components
• 612ee8fb - Add blocks tab with test data to user settings page
• 646014c9 - Wire up ui to real blocks api data
• 8e910b8b - Add withList hoc and remove UserList component
• 77c38d4a - Update BasicUserCard template and add a slot for customization
• 9904d53a - Finally, added BlockCard
• f270a3a5 - Complete functionality of BlockCard
• 0691cb55 - Update hocs to pass parent-scope bindings to the wrapped component
• 1d685b69 - Add withSubscription hoc
• f2e5ff63 - Remove pagination support from block-list
• 5ff73a4f - Add a prop to force-refresh data to withSubscription hoc
• ae5551f6 - Add mutes tab
• 223193e2 - Set blockIds and muteIds to the currentUser state only
• f3b7d39b - Just save blocks/mutes instead of adding
• fbd20863 - Use hoc definitions to be factor of factory
• 68229285 - Improve chaining hocs using vue-compose
• 63d2b317 - Rename some options and add comments to HOCs
• abf3b0f9 - Pass down slots into wrapped components
• 0506625a - Minor css improvements of hocs
• 05d7c14d - Add note for empty state to the lists using slot
• 5b5b33de - Add new strings to i18n
• cbe7d673 - Remove pagination logic in fetchBlocks api
• 1e579ff6 - Add missing translation strings

Compare with previous version

I'm really liking the use of higher order components here, a bit confusing at first but yeah it's a great idea.

added 64 commits

• 1e579ff6...22a0858e - 40 commits from branch pleroma:develop
• 17aea93f - Add withLoadMore hoc
• cafd7be6 - Add reusable BasicUserCard and UserList components
• 4ae624d2 - Add blocks tab with test data to user settings page
• 901379ef - Wire up ui to real blocks api data
• 1892cbc1 - Add withList hoc and remove UserList component
• 4d656a56 - Update BasicUserCard template and add a slot for customization
• 7b24e223 - Finally, added BlockCard
• c42c6efd - Complete functionality of BlockCard
• 939c031b - Update hocs to pass parent-scope bindings to the wrapped component
• a211bc6d - Add withSubscription hoc
• 2e8f202a - Remove pagination support from block-list
• 33cc094c - Add a prop to force-refresh data to withSubscription hoc
• 3ada4021 - Add mutes tab
• 6117fddf - Set blockIds and muteIds to the currentUser state only
• 5941cd13 - Just save blocks/mutes instead of adding
• f677cef7 - Use hoc definitions to be factor of factory
• 7169cfc9 - Improve chaining hocs using vue-compose
• 339f8205 - Rename some options and add comments to HOCs
• 6f5116e2 - Pass down slots into wrapped components
• 6df4055e - Minor css improvements of hocs
• 472ab690 - Add note for empty state to the lists using slot
• 2a9645db - Add new strings to i18n
• 2b8defd9 - Remove pagination logic in fetchBlocks api
• 6811a5fa - Add missing translation strings

Compare with previous version

conflicts resolved.

Looks and works fine for me, maybe @hj wants to take a look as well? some pretty big changes here

biggest question is - does muting a user remove their posts from TL or not?

I don't think that's a concern of this issue, we have the option to show filtered statuses on timeline or not already (which btw is a bit fugged as it defaults to the opposite of existing behavior but I don't think it's a big deal either way if we can actually manage mutes with this MR)

Hell yes it is a concern of this issue. Muting in pleromafe just collapses user's posts and we want to keep that behavior in.

I mean, this MR is about being able to manage mutes and blocks, it shouldn't have anything to do with what happens when you mute or block someone. I agree otherwise that filtering by user and displaying filtered statuses as thin lines should remain a thing.

added 1 commit

• d12bebf2 - Fix indent

Compare with previous version

added 1 commit

• 5b52427b - Remove needless css

Compare with previous version

Thanks for reviewing, guys!

fyi, Mutes tab is not functional at the moment because of the related apis are not ready or functional.

• fetch -> /api/qvitter/mutes.json

• update -> /api/qvitter/set_profile_pref.json

We can hide that tab for now.

added 1 commit

• 22ca85ee - Comment out the mutes tab

Compare with previous version

added 32 commits

• 22ca85ee...cfdd885e - 5 commits from branch pleroma:develop
• 12df967c - Add withLoadMore hoc
• 4a737cbe - Add reusable BasicUserCard and UserList components
• a56d2dfe - Add blocks tab with test data to user settings page
• a817cc7c - Wire up ui to real blocks api data
• 94e6de11 - Add withList hoc and remove UserList component
• 5d6e1864 - Update BasicUserCard template and add a slot for customization
• 0220d3d3 - Finally, added BlockCard
• 52913d8f - Complete functionality of BlockCard
• 82702748 - Update hocs to pass parent-scope bindings to the wrapped component
• 159e8453 - Add withSubscription hoc
• 8c8a6edc - Remove pagination support from block-list
• 09315b27 - Add a prop to force-refresh data to withSubscription hoc
• e91a94ff - Add mutes tab
• 1fd9a1c7 - Set blockIds and muteIds to the currentUser state only
• 8f608e06 - Just save blocks/mutes instead of adding
• f81b82b4 - Use hoc definitions to be factor of factory
• 339373b4 - Improve chaining hocs using vue-compose
• 6d4d705c - Rename some options and add comments to HOCs
• 8680046c - Pass down slots into wrapped components
• b4a5b520 - Minor css improvements of hocs
• a5162bd6 - Add note for empty state to the lists using slot
• 395d2129 - Add new strings to i18n
• 32c112bc - Remove pagination logic in fetchBlocks api
• 85d43d17 - Add missing translation strings
• 46e1f303 - Fix indent
• 5bd36c64 - Remove needless css
• 37eec09b - Comment out the mutes tab

Compare with previous version

Hell yes it is a concern of this issue. Muting in pleromafe just collapses user's posts and we want to keep that behavior in.

Yes but we have to rename this feature because it's a direct conflict with Mastodon Mutes which is the functionality everyone expects -- something that's global for your account and not something that is only a feature of the PleromaFE "client".