Display Custom Blocks Listing in the Second Tab of the Left Sidebar

Feature: Display Personalized Blocks Listing in the Second Tab of the Left Sidebar

Description:

Integrate the listing of Personalized Blocks in the existing second tab in the left sidebar when the "Blocks" button in the page header is selected.

Implementation Details:

Frontend:

Initialize Main Vue.js Component PersonalizedBlocksPlugin
- File: personalizedBlocksPlugin.js
- Task:
  - Create a Vue.js component to configure the ViewModel and extensions. Use this.vm. to refer to the ViewModel.
- Example Template:
```
Vue.component('PersonalizedBlocksPlugin', {
components: {
 PersonalizedBlocksListComponent,
},
data: () => ({
 viewModel: vm,
}),
//... other logic
});
```
Initialize List Component PersonalizedBlocksListComponent
- File: personalizedBlocksListComponent.js
- Task:
  - Create a Vue.js component to manage the listing of Personalized Blocks, including API calls, loading state, and error handling.
- Example Template:
```
Vue.component('PersonalizedBlocksListComponent', {
//... other logic
});
```
API Calls to Fetch Personalized Blocks
- File: personalizedBlocksListComponent.js
- Task:
  - Add a method named fetchPersonalizedBlocks that will make an API call to the getPersonalizedBlocks endpoint. Utilize this.vm.metadata.groupId for the groupId.
Manage Loading State
- File: personalizedBlocksListComponent.js
- Task:
  - Add a Vue.js data property isLoading to manage the loading state. Display a loading spinner while fetching data.
Vue Data Property for Personalized Blocks
- File: personalizedBlocksListComponent.js
- Task:
  - Add a Vue.js data property named personalizedBlocks to store the fetched blocks.
Displaying Personalized Blocks Using Existing HTML Structure
- File: toolbox.tmpl.html
- Task:
  - Utilize the HTML structure already in place for displaying template blocks. Bind this part to the personalizedBlocks data property from the Vue component.
Handle Errors
- File: personalizedBlocksListComponent.js
- Task:
  - In case of an API failure, display an error toast notification using this.vm.notifier.error(message).
Integrate the Vue.js Component into HTML
- File: toolbox.tmpl.html
- Task:
  - Add a tag <personalized-blocks-list-component /> to integrate the Vue.js component within the HTML file.

Acceptance Criteria:

The second tab in the left sidebar successfully displays the list of Personalized Blocks when blocksActiveTab is set to CUSTOM_BLOCKS.
The HTML structure for displaying Personalized Blocks is the same as that for displaying template blocks.
A loading spinner is displayed while fetching data.
Toast notifications are displayed in case of API errors.