[Remove Vuetify from Studio] Channel collections table

[Prashant-thakur77]

Fixes #5529

Summary

This PR replaces the old Vuetify-based ChannelSetList with a new StudioCollectionsTable built using Kolibri Design System (KDS) components. The goal is to continue the process of removing Vuetify from Studio and modernizing the UI to match current Kolibri patterns.
Screencast From 2025-11-05 11-01-24.webm

References

Sub-issue of #5060.

Reviewer guidance

How to get there
Login as [email protected] with password a
Go to Channels > Collections

How to run Kolibri
Find detailed guidance with many code examples in KDS documentation
Read #5060 for more useful references

[Prashant-thakur77]

Hlo @MisRob i just read the slack thread related to the Positioning of elements

I think this will get resolved in this pr only.
as currently this is how it works.
Screencast From 2025-11-11 18-07-10.webm
Just wanted to let you know in case of any prob regarding it. :).Thanks

[MisRob]

Hi @Prashant-thakur77, I will follow-up on everything next week. Thanks for preparing the table for this work.

[MisRob]

Thanks a lot @Prashant-thakur77 - this is aligned to requirements, and well implemented. I'm leaving some cleanup notes.

Since we already have clarity on how the interface should look like, in addition I am also posting next steps that will actually finalize this page so we can merge this work. Those notes, however, are beyond the scope of the original issue whose main task was to prepare a draft - I consider that done. If you don't wish or can't work on those, that would be completely fine. I can finish it myself - just let me know what works best.

[MisRob]

Could you add a descriptive label here and then visually hide it? After you have installed learningequality/kolibri-design-system#1169 as suggested in the other comment, visuallyhidden class should work as expected. I think it should be possible to utilize KTable's header slot to apply the class. But this may be the first use-case - let me know if there were any issues.

[Prashant-thakur77]

Regarding the visuallyhidden issue?should i leave this one too?

[MisRob]

Yes yes

[Prashant-thakur77]

I consider that done. If you don't wish or can't work on those, that would be completely fine. I can finish it myself - just let me know what works best.

@MisRob
Thanks a lot for the feedback! I’m glad the draft meets the requirements.

I’d be happy to help further and can definitely work on the next steps as well.Firstly i will complete the necessary cleanup mentioned above.

[Prashant-thakur77]

@MisRob I have done the changes required ,and regarding one below:

Would you make the token field take the full height of a table row, like here in the current version?

I have done it by apllying -ve margin to studiocopytoken as the extra space was because of the uiFeedback box of the Ktextbox .The desired behaviour is achieved but i have not changed the 8px padding of the cells of the kTable.Do tell if it is required:)

Do tell if they are according to the scope or if for the height issue some other solution is to be used:)

2. The caption prop's translated string is still showing on top of the table,but i think it might be because of the visually hidden class issue.

[MisRob]

This all looks very good @Prashant-thakur77

[MisRob]

Hi @Prashant-thakur77, all latest updates are great. I will now take this work over and fine-tune as I discuss final details with our design team. In any case, what you submitted was already very close to the final version and helped us a lot. Thanks!

[Prashant-thakur77]

@MisRob glad to help, currently i am working on the side pannel pr ,but if there is any other issue you would like me to work on ,i will be glad to help:)..