Change category selection from PrimeNG sidebar to dialog

[oidacra]

Parent Issue

#28493

Task

Change the category selection component from a PrimeNG sidebar to a PrimeNG dialog. This task involves modifying the existing UI to improve the user experience for category selection.

Proposed Objective

Technical User Experience

Proposed Priority

Priority 3 - Average

Acceptance Criteria

1. Category selection is displayed in a PrimeNG dialog instead of a sidebar
2. A "Cancel" button is added to the dialog, which closes it when clicked
3. An "Apply" button is added to the dialog, which applies the selection to the input when clicked
4. A close (X) icon is added to the dialog header
5. The dialog closes when the ESC key is pressed
6. The dialog NOT closes when clicked outside of it (on the overlay)
7. The new implementation is tested and working as expected across all relevant pages/components
8. By default, the dialog has 1 full column of categories and 2 empty (the sidebar has total 4)

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

FIGMA (https://www.figma.com/design/YMTdSO5gKf18rc1pCCv1jN/Edit-Contentlet?node-id=3795-86963&t=xOJCvxGRqJH8HShn-1)

Assumptions & Initiation Needs

• Current implementation uses PrimeNG sidebar component
• No major changes to the backend or data structure are required for this UI change

Quality Assurance Notes & Workarounds

• Opening and closing the dialog using all available methods (buttons, ESC, overlay click)
• Selecting categories and applying/canceling the selection

Sub-Tasks & Estimates

No response

[dsilvam]

Passed Internal QA: The selection for the category field was moved to a dialog and all the checks from the description are in place.

[josemejias11]

Approved: Tested on master_b295876_SNAPSHOT, Docker, macOS 14.5, FF v126.0.1