Add "bulk mute/unmute/block/unblock" feature

As another part of #227 (closed), this will add a bulk feature to mutes/blocks tabs.

Technical notes;

• Replaced withList HOC with List component since component composition using slots is more flexible than HOC for the list purpose and also it is the preferred way of Vue.
• Added reusable Checkbox, ProgressButton and SelectableList components.
• Moved line style for splitting list items from BasicUserCard to List component.

Screenshots

• None-selected state

• All-selected state

• Indeterminate state

added 1 commit

• afcf118d - remove unused package

Compare with previous version

added 1 commit

• 73d4e29e - clean up

Compare with previous version

added 49 commits

• 73d4e29e...8c7f765d - 5 commits from branch pleroma:develop
• 234b459e - setup vue-autosuggest
• 4c55c441 - add checkbox component
• b553703b - add SelectableRow component
• 58d99948 - use reusable List vue component instead of withList hoc
• 6f15d80f - refactor using List component
• 2fa885f6 - remove withList hoc
• 083916d5 - remove unused yarn package
• e704e783 - rename selectable_row to selectable_list
• 6342d291 - use SelectableList for blocks/mutes list
• 51465341 - save selected items to the state
• 0388bfd7 - use key properly
• 6f2aaf9f - add some styling to the selectable-list component
• 1eb44675 - move border-bottom style to the list
• 05b0a204 - add border-bottom style to the list component as well
• 37e75a62 - refactor selectable-list using list component
• adee5d71 - clean up
• 8efa259e - let not selectable-list know about getKey prop
• ecdeba63 - show empty slot only if it has content
• b285b609 - recover border between basic-user-card using list component
• 98d26d0f - remove border-bottom of the last list item
• a4baad3a - add header to selectable-list component
• 697f86a3 - support header slot
• 6e441f3f - add border-bottom to the header
• b5ee722d - replace scope attributes by slot-scope
• 15014ae7 - add reusable progress-button cmoponent
• 228d3aaa - add bulk action buttons
• 270bf75a - make border of list header thicker
• df012cb6 - pass down empty slot
• 679d8cba - show list header only if there are items
• 4cc2a510 - add a comment
• 28fafc21 - wire up bulk action buttons to vuex
• 9e8ee9a4 - add bulk mute/unmute buttons and wire up to vuex
• da5eda69 - clean up
• 19801dbd - ui improvements
• cdb6d972 - support i18n
• ead40fe9 - rewrite checkbox component as non-functional
• f46ca66d - update checkbox importing path
• 0b07ac60 - import scss variables
• e85f9605 - update model and props properties
• 0ae547f8 - render span tag only if it has content
• 1451967a - support indeterminate checkbox state
• b33f3839 - make sure to use filtered selected keys
• d842a33b - remove unused package
• 2c1660ac - clean up

Compare with previous version

added 48 commits

• 2c1660ac...546ced43 - 4 commits from branch pleroma:develop
• 60778ca7 - setup vue-autosuggest
• a7a039d9 - add checkbox component
• 4e4c5d88 - add SelectableRow component
• e536f070 - use reusable List vue component instead of withList hoc
• 6df2b4b1 - refactor using List component
• 0da575ec - remove withList hoc
• 372b47a8 - remove unused yarn package
• de26a52a - rename selectable_row to selectable_list
• bdd80782 - use SelectableList for blocks/mutes list
• 19c62a6d - save selected items to the state
• 61fdb024 - use key properly
• 8228803d - add some styling to the selectable-list component
• 5f537c74 - move border-bottom style to the list
• 66f0c9fa - add border-bottom style to the list component as well
• 4c1e4e0a - refactor selectable-list using list component
• fc29f1d9 - clean up
• 18bc37fb - let not selectable-list know about getKey prop
• cc9a3ee0 - show empty slot only if it has content
• 1df5b0f3 - recover border between basic-user-card using list component
• 68b266d6 - remove border-bottom of the last list item
• 5b099d7d - add header to selectable-list component
• 2cb374d9 - support header slot
• 52a51b0c - add border-bottom to the header
• 4ab52a0f - replace scope attributes by slot-scope
• cb0dbe12 - add reusable progress-button cmoponent
• 2eda4f37 - add bulk action buttons
• f234655f - make border of list header thicker
• 85054c01 - pass down empty slot
• 4543f61f - show list header only if there are items
• f08c6ab9 - add a comment
• b2631260 - wire up bulk action buttons to vuex
• 6c1bfcdc - add bulk mute/unmute buttons and wire up to vuex
• 112699dd - clean up
• d81911d6 - ui improvements
• 4592c2bf - support i18n
• b6870f50 - rewrite checkbox component as non-functional
• f112d88b - update checkbox importing path
• 7cbdf788 - import scss variables
• 1e6ae75f - update model and props properties
• 1800048f - render span tag only if it has content
• f7d2d528 - support indeterminate checkbox state
• b2509756 - make sure to use filtered selected keys
• 84aa3284 - remove unused package
• 86d02d3b - clean up

Compare with previous version

added 1 commit

• 5d43d341 - fix typos

Compare with previous version

resolved all discussions

I'm gonna have to read through the code again tomorrow, so many changes :)

added 63 commits

• 5d43d341...d94a7b63 - 18 commits from branch pleroma:develop
• 7d5e6aec - setup vue-autosuggest
• db75ed6e - add checkbox component
• b6c4f57f - add SelectableRow component
• 158f3da5 - use reusable List vue component instead of withList hoc
• 4eb7fa11 - refactor using List component
• b3c88154 - remove withList hoc
• 3aa34f8b - remove unused yarn package
• 52f17db5 - rename selectable_row to selectable_list
• c4936e7b - use SelectableList for blocks/mutes list
• 6374b18b - save selected items to the state
• 444827cf - use key properly
• 3e340d5a - add some styling to the selectable-list component
• c1f65ed2 - move border-bottom style to the list
• 44fabc38 - add border-bottom style to the list component as well
• 29cbc4ab - refactor selectable-list using list component
• df1b8fb8 - clean up
• 2afb0922 - let not selectable-list know about getKey prop
• 39f767f4 - show empty slot only if it has content
• 220b121a - recover border between basic-user-card using list component
• a508dfec - remove border-bottom of the last list item
• 7e74f338 - add header to selectable-list component
• 723c8ec0 - support header slot
• 54c0ba68 - add border-bottom to the header
• 999dd3b6 - replace scope attributes by slot-scope
• 4fb8cbfc - add reusable progress-button cmoponent
• 9099cce1 - add bulk action buttons
• 89ba3a3c - make border of list header thicker
• f71588eb - pass down empty slot
• c2d3745a - show list header only if there are items
• c2f7b264 - add a comment
• 2e60615f - wire up bulk action buttons to vuex
• bf8c0cce - add bulk mute/unmute buttons and wire up to vuex
• c6dceba6 - clean up
• 9a2a90c5 - ui improvements
• 1d3c311d - support i18n
• 9bf0213e - rewrite checkbox component as non-functional
• 18ebdf2e - update checkbox importing path
• 0670dbcb - import scss variables
• 85d5065b - update model and props properties
• 847d6333 - render span tag only if it has content
• 11eea630 - support indeterminate checkbox state
• 81a22850 - make sure to use filtered selected keys
• e3c10085 - remove unused package
• 1b7e97e3 - clean up
• 1260d2d8 - fix typos

Compare with previous version

resolved all discussions

added 1 commit

• 4ff79980 - code readability

Compare with previous version

added 89 commits

• 4ff79980...fa33e3ec - 43 commits from branch pleroma:develop
• 0cb99f5a - setup vue-autosuggest
• f20337b3 - add checkbox component
• f90fd707 - add SelectableRow component
• 34942fe7 - use reusable List vue component instead of withList hoc
• 89a4c3d8 - refactor using List component
• 141bbc05 - remove withList hoc
• 3ec6c06c - remove unused yarn package
• 6022925d - rename selectable_row to selectable_list
• e59f1df3 - use SelectableList for blocks/mutes list
• 18aba043 - save selected items to the state
• 154b452f - use key properly
• a3aa2e01 - add some styling to the selectable-list component
• f0e348d3 - move border-bottom style to the list
• c4c92a21 - add border-bottom style to the list component as well
• 7b5c94b9 - refactor selectable-list using list component
• 5744d089 - clean up
• e05c1963 - let not selectable-list know about getKey prop
• 7409aa49 - show empty slot only if it has content
• fabb95ad - recover border between basic-user-card using list component
• bb8cd5fd - remove border-bottom of the last list item
• 2e4729cd - add header to selectable-list component
• 684d90a4 - support header slot
• 9500565e - add border-bottom to the header
• 4058f3f6 - replace scope attributes by slot-scope
• c198f4b6 - add reusable progress-button cmoponent
• 6a3c3691 - add bulk action buttons
• 08fc97c5 - make border of list header thicker
• ca91571d - pass down empty slot
• a18ca40c - show list header only if there are items
• 4e31a13b - add a comment
• 9e8a8cd2 - wire up bulk action buttons to vuex
• 5c7c06fa - add bulk mute/unmute buttons and wire up to vuex
• 06281a1a - clean up
• c34dc391 - ui improvements
• ccabd96b - support i18n
• e2386ef4 - rewrite checkbox component as non-functional
• 492d72a3 - update checkbox importing path
• 0cd7e2ee - import scss variables
• ab3404d9 - update model and props properties
• 272cb2ba - render span tag only if it has content
• 1e76578b - support indeterminate checkbox state
• af7162ee - make sure to use filtered selected keys
• 36a46a6d - remove unused package
• e3418e5a - clean up
• a40d47f8 - fix typos
• 6246546c - code readability

Compare with previous version

added 49 commits

• 6246546c...936eb23b - 3 commits from branch pleroma:develop
• 256af0fd - setup vue-autosuggest
• 8aa3808b - add checkbox component
• ef79125f - add SelectableRow component
• 1888e67a - use reusable List vue component instead of withList hoc
• ae3cdff8 - refactor using List component
• 6f910ce0 - remove withList hoc
• 2c5a4c8c - remove unused yarn package
• 42f915d5 - rename selectable_row to selectable_list
• 0034d396 - use SelectableList for blocks/mutes list
• b15ab0f9 - save selected items to the state
• a451cb1c - use key properly
• 492b780c - add some styling to the selectable-list component
• 2bf6f87a - move border-bottom style to the list
• 61b7b4ab - add border-bottom style to the list component as well
• 879a9fac - refactor selectable-list using list component
• 42b26b23 - clean up
• 416aa1d8 - let not selectable-list know about getKey prop
• 86ab5a32 - show empty slot only if it has content
• 07c4c939 - recover border between basic-user-card using list component
• e1558868 - remove border-bottom of the last list item
• 104f40a9 - add header to selectable-list component
• 1b0f51da - support header slot
• 5b84ef9b - add border-bottom to the header
• 76707a93 - replace scope attributes by slot-scope
• 80a87a71 - add reusable progress-button cmoponent
• 9c877861 - add bulk action buttons
• 8c3a1b7f - make border of list header thicker
• 96066eaa - pass down empty slot
• 8876fb34 - show list header only if there are items
• 28bad340 - add a comment
• 6dec0edb - wire up bulk action buttons to vuex
• dbb65848 - add bulk mute/unmute buttons and wire up to vuex
• ca2a8cff - clean up
• 7aab8587 - ui improvements
• 401117a8 - support i18n
• da7590a6 - rewrite checkbox component as non-functional
• c529c3d2 - update checkbox importing path
• 50532a60 - import scss variables
• df1c9b1b - update model and props properties
• 52b1da5c - render span tag only if it has content
• 4903e30f - support indeterminate checkbox state
• 738085fc - make sure to use filtered selected keys
• 46de397a - remove unused package
• 3855181b - clean up
• 35de7c0b - fix typos
• 16810bb8 - code readability

Compare with previous version

added 68 commits

• 16810bb8...55410c91 - 23 commits from branch pleroma:develop
• 59e9f25a - add checkbox component
• 58d998f9 - add SelectableRow component
• 97144756 - use reusable List vue component instead of withList hoc
• d49bb90d - refactor using List component
• 0ffb4b35 - remove withList hoc
• 9e3505c0 - remove unused yarn package
• 21fbb7d2 - rename selectable_row to selectable_list
• 62ecca89 - use SelectableList for blocks/mutes list
• e46e47ac - save selected items to the state
• 4021ad36 - use key properly
• f162557f - add some styling to the selectable-list component
• 0d3ae098 - move border-bottom style to the list
• 647405ea - add border-bottom style to the list component as well
• b669bf88 - refactor selectable-list using list component
• 9afbc6c9 - clean up
• b3ca70e9 - let not selectable-list know about getKey prop
• f80dfb0d - show empty slot only if it has content
• 1d56d486 - recover border between basic-user-card using list component
• 67693d81 - remove border-bottom of the last list item
• d57f9d52 - add header to selectable-list component
• fab99999 - support header slot
• e5c4b88d - add border-bottom to the header
• f6a7d345 - replace scope attributes by slot-scope
• 11013a27 - add reusable progress-button cmoponent
• 534d2ae1 - add bulk action buttons
• b0457279 - make border of list header thicker
• 54fe9999 - pass down empty slot
• 3bd42999 - show list header only if there are items
• fdb092d1 - add a comment
• ca3ad94d - wire up bulk action buttons to vuex
• 9927d694 - add bulk mute/unmute buttons and wire up to vuex
• 19a45cc7 - clean up
• 93677a9e - ui improvements
• d3ad36a4 - support i18n
• 43325258 - rewrite checkbox component as non-functional
• e1bcb181 - update checkbox importing path
• b9215881 - import scss variables
• 46ebe23b - update model and props properties
• 9c1f8eb3 - render span tag only if it has content
• 7d3892ab - support indeterminate checkbox state
• 3f8fb395 - make sure to use filtered selected keys
• 3f721b35 - clean up
• cb9fab10 - fix typos
• 89c4b242 - code readability
• 46eb192e - remove extra spacing

Compare with previous version

added 1 commit

• c0aa13b1 - Revert "recover border between basic-user-card using list component"

Compare with previous version

resolved all discussions

added 48 commits

• c0aa13b1...e9f4244b - 2 commits from branch pleroma:develop
• a5099909 - add checkbox component
• 4b292564 - add SelectableRow component
• 1cec2b69 - use reusable List vue component instead of withList hoc
• 738a3dc0 - refactor using List component
• 0bf451bb - remove withList hoc
• 39efe9c5 - remove unused yarn package
• 23b9d1ea - rename selectable_row to selectable_list
• d9b3f5be - use SelectableList for blocks/mutes list
• e0b24637 - save selected items to the state
• f6e9f287 - use key properly
• 3a318dc3 - add some styling to the selectable-list component
• 80d83b46 - move border-bottom style to the list
• d806038a - add border-bottom style to the list component as well
• 792ae169 - refactor selectable-list using list component
• 32035217 - clean up
• b8ec13c8 - let not selectable-list know about getKey prop
• f066ccd2 - show empty slot only if it has content
• ca26776b - recover border between basic-user-card using list component
• 83faa96f - remove border-bottom of the last list item
• cf2c411d - add header to selectable-list component
• 7a8ffcd7 - support header slot
• d4e43e0e - add border-bottom to the header
• fe7766bc - replace scope attributes by slot-scope
• 403c7bbe - add reusable progress-button cmoponent
• 8fa639f2 - add bulk action buttons
• 67919f95 - make border of list header thicker
• ac62e47c - pass down empty slot
• 1afef103 - show list header only if there are items
• 7e74a13f - add a comment
• 13c8f10f - wire up bulk action buttons to vuex
• d3cad54a - add bulk mute/unmute buttons and wire up to vuex
• c81bde0c - clean up
• 7f6bd538 - ui improvements
• ac9ddfb1 - support i18n
• 468aec0d - rewrite checkbox component as non-functional
• 1144025f - update checkbox importing path
• 8088043a - import scss variables
• 98884911 - update model and props properties
• 3f5e798d - render span tag only if it has content
• ecff6acf - support indeterminate checkbox state
• 10ecc2c8 - make sure to use filtered selected keys
• a89236f6 - clean up
• bb38a431 - fix typos
• e67fecff - code readability
• bd88a481 - remove extra spacing
• de945e5f - Revert "recover border between basic-user-card using list component"

Compare with previous version

merged

mentioned in commit ed0f10e9