🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: Medium

Summary

Migrate content of ChannelDetailsModal from Vuetify to Kolibri Design System:

Currently, DetailsPanel, DetailsRow, and their sub-components use many Vuetify components.

Remove Vuetify dependencies in this location by:

• Create StudioDetailsPanel and StudioDetailsRow as exact copies of DetailsPanel and DetailsRow, but without Vuetify components:
  • Replace Thumbnail with KImg using a 16:9 ratio. When thumbnail images are unavailable, preserve the placeholder icon and its responsive scaling (see KImg: Placeholder area).
  • Replace CopyToken with StudioCopyToken
  • Replace LoadingText with StudioLargeLoader
  • Replace VDataTable with the description list <dl>
  • Replace VChip with StudioChip
  • Replace VTooltip with KTooltip
  • Replace Icon with KIcon
  • Remove VLayout, VFlex, and VCard in favor of custom styles
• Use StudioDetailsPanel in ChannelDetailsModal

Ensure there are no regressions across all screen sizes and in as many variations as possible (with and without thumbnail images, with and without data for each displayed row, ...). Do not modify DetailsPanel, DetailsRow, or their sub-components.

How to get there

• Login as [email protected] with password a
• Go to Channels > My Channels
• Click the info icon on a channel card

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not modify DetailsPanel, DetailsRow, or their sub-components
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

Acceptance criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no regressions in the printing preview
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).