[Remove Vuetify from Studio] Channel collection options

[vtushar06]

Summary

Replaced Vuetify components with Kolibri Design System (KDS) components in Channel collection options:

• Replaced BaseMenu + VList with KButton + KDropdownMenu for the Options dropdown
• Replaced MessageDialog with KModal for the delete confirmation dialog
• Replaced VBtn with KButton for the Remove button in collection editing

Manual verification:

✅ Options dropdown opens below the button with Edit and Delete options (with icons)
✅ Delete confirmation modal displays correctly with proper text alignment
✅ All buttons and modals function as expected
✅ Tested in both LTR and RTL modes

Screenshots:

1. Options dropdown open (showing Edit/Delete with icons)

2. Delete confirmation modal 3. Remove button in edit collection view

…

References

closes: #5484

…

Reviewer guidance

1. Navigate to Channels > Collections tab
2. Create or view an existing collection
3. Click the Options button (three dots) - verify dropdown appears below with Edit/Delete options
4. Click Delete - verify modal shows correct title "DELETE COLLECTION" and left-aligned text
5. Click Edit - verify Remove buttons are blue/primary styled
6. Test in RTL mode by switching language settings

…

[vtushar06]

Hi @MisRob, I'm seeing test failures in SearchOrBrowseWindow.vue and AssessmentItemEditor.spec.js, but these files are unrelated to my changes in the Channel collection options. My changes only affect ChannelSetItem.vue and ChannelSetModal.vue.

Could you please help me out.Thanks

[MisRob]

Thank you @vtushar06 - we will assign a reviewer within next two weeks.

As for the failing test, this is what I see here in GitHub and it suggests it's related to your changes - can you try to examine them locally one more time?

I haven't examined your code - just general note on dialog-related tests - this note may help.

[MisRob]

Thank you @vtushar06 - code changes make sense and everything works as expected. Just one note on unit testing.

[vtushar06]

Hi @MisRob!
I have updated all the tests to VTL and all passing locally. The failing CI checks unrelated to these Vue changes as all frontend checks passing.
can you please look into this and guide me for my next step.

[MisRob]

Nice work @vtushar06. Just few last tweaks and then we can merge.

As for the failing checks, yes those are not related to your changes. I will check on it.

[MisRob]

KButton has the hasDropdown prop that would be a bit more suitable than iconAfter.

[MisRob]

Compared to the default, I don't see this resulting in a different experience on any of the resolutions. So I think you can remove position.

[MisRob]

On line 76, the test clicked the edit option, so there would be no point to test for its presence as a conclusion of this test.

Instead, here we need to check that we're on the expected route URL - then the test will do what it describes.