[Remove Vuetify from Studio] Channel details in Channels - page layout

[vtushar06]

Summary

Migrates ChannelDetailsModal from Vuetify to Kolibri Design System by creating a new StudioImmersiveModal component.

Changes:

• Created StudioImmersiveModal.vue - Fullscreen modal using KToolbar and KIconButton (no Vuetify dependencies)
• Refactored ChannelDetailsModal.vue:
  • Replaced FullscreenModal with StudioImmersiveModal
  • Replaced Vuetify download menu with KButton + KDropdownMenu
  • Replaced LoadingText with StudioLargeLoader
  • Removed all Vuetify components (VCard, VLayout, VSpacer, VBtn, VList, etc.)
  • Preserved DetailsPanel unchanged per requirements

Screenshots:

References

Closes: #5474
…

Reviewer guidance

Quick Test:

1. pnpm install && pnpm run devserver:hot
2. Login as a@a.com / a
3. Go to Channels > My Channels
4. Click info icon (ⓘ) on any channel
5. Verify: toolbar, close button, ESC key, download dropdown, responsive layout

Key Test Cases:

• Close button & ESC key work
• Download PDF/CSV functional
• Mobile: full-width button
• RTL: proper spacing and alignment (pnpm run devserver)
• Offline alert appears when disconnected

[vtushar06]

Hii @MisRob,question about layout:

Using StudioPage as specified, but its margin-top: 104px creates extra spacing in the fullscreen modal (we only have a 64px toolbar).
should I use:

1. Use custom layout instead(currently used)
2. Keep as-is

Let me know your preference! Thanks!

[MisRob]

Hi @vtushar06,

I think it'd be meaningful to remove margin-top: 104px; from StudioPage internal implementation, and let it be configured from outside via class or style, for example:

<StudioPage
  :style={ marginTop: ...}
/>

In this way, we will be able to use StudioPage in all current and future contexts easily.

Note that there are few other places where StudioPage is used. After you have done all changes, would you please check that they still work as expected both with and without the offline alert bar?

[vtushar06]

Hi @MisRob,
I’ve implemented your feedback regarding the StudioPage marginTop prop and I believe the PR is now ready for review.

[vtushar06]

I wanted to confirm the intended behavior: I’ve added margin: '0 auto' to StudioPage’s inner content to center the max-width: 1000px container on large screens. This improves the layout for the modal and other pages using StudioPage.
This change affects all pages using StudioPage, but should be a visual improvement (centered content vs left-aligned). I’ve tested locally and it looks good. Should I verify anything specific regarding other pages using StudioPage?

[MisRob]

@vtushar06 we won't do any changes to user experience unless explicitly mentioned in the issue - it's not the goal of this project, and we have internal processes that would need to precede such decisions. So please stay as close as possible to the current experience.

[vtushar06]

okay sure @MisRob, I thought in sake for UX, reverting back the changes to use current experience, thanks for this guidance too.

[vtushar06]

Hii @MisRob, I have updated inner page to use previous codes, I think now you can review this out whenever possible and let me know if any further changes required to update.

[MisRob]

Thanks for you understanding @vtushar06 - it's definitely good that you think about how to improve user experience - I just need to work within the scope of this project ;)

[MisRob]

Hi @vtushar06, just following-up - I plan to review this PR next week. I posted few notes on your other PRs and some of them were quite general, so meanwhile you can see if any of them apply here as well.

[vtushar06]

Hii @MisRob, I rechecked all my changes, Now you can proceed with review.Thanks

[MisRob]

Hi @vtushar06, thank you. Looks pretty good overall. I'm leaving some notes and few questions.

In my localhost preview, I noticed these three areas that need to be addressed:

[vtushar06]

REC-20251118150809.mp4

Hi @MisRob,
Thanks for the thorough review! I've made all the updates:
All the changes follow the principles you suggested. The PR should be much cleaner now!

[MisRob]

The recording looks good @vtushar06, I will re-review. Can you have a look at why tests are failing?

[vtushar06]

Hi @MisRob, I've analyzed the test failures and found that the tests are looking for data-testid="loader" and data-testid="details-panel", but these attributes don't exist on the StudioLargeLoader and DetailsPanel components. The components are rendering correctly (I can see them in the DOM output), but the test selectors don't match. This appears to be a pre-existing issue with the test setup,may be these are not related to our Vuetify- KDS migration. What would be the best approach to fix this?

[MisRob]

@vtushar06 I don't understand fully what you're trying to say around pre-existing issue, but I don't see a problem with adding test IDs as needed. E.g. StudioLargeLoader was added here in this PR. So if you're adding/updating a test that needs to detect the loader with the test ID, you need to put that test ID on StudioLargerLoader.

[vtushar06]

you're right, my apologies for the confusion. I understand now - since I added StudioLargeLoader in this PR, it's my job to make sure it has the test IDs tests need. I've now added data-testid="loader" to it. Thanks for clarifying.

[vtushar06]

Now PR is ready to get final review.