[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 [email protected] / 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 ;)