[Remove Vuetify from Studio] Layout and input on the Collection > Select channels page

[Swoyamjeetcodes]

Summary

This PR removes Vuetify usage from the layout and input in the Collection → Select channels selection list, per issue scope.

Changes made:

• Replaced LoadingText with StudioLargeLoader and useKShow(..., 400) for minimum visible loader time.
• Replaced Checkbox with KCheckbox.
• Replaced VTextField with KTextbox.
• Replaced local VContainer / VLayout usage in ChannelSelectionList with custom scoped styles and div layout.
• Kept channel card refactor out of scope (no card changes).

Behavior preserved:

• Search filtering works as before.
• Selecting/deselecting works via checkbox click.
• Selecting/deselecting works via channel item click.
• Empty-search state still displays “No channels found”.

Tests/verification:

• Updated channelSelectionList.spec.js to mock useKShow.
• Added loader test for loading state behavior.
• Ran:
  • pnpm exec eslint contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js
  • pnpm test -- contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js
  • pnpm run build

Manual verification:

1. Login as user@a.com / a.
2. Go to Channels → Collections.
3. Click New collection.
4. Click Select channels.
5. Verify loader, search, selection via checkbox, selection via row click, and empty search state.

Screenshots:

Scenario	Screenshot
Select channels — Initial load
Select channels — Default list
Select channels — Filtered / Empty result

References

• Closes [Remove Vuetify from Studio] Layout and input on the Collection > Select channels page #5774
• Part of Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System #5060

Reviewer guidance

Please verify:

• Loader uses minimum visible time behavior (useKShow(..., 400)).
• Checkbox and row click selection interactions still match previous behavior.
• Search and empty-state behavior are unchanged.
• No channel card refactor was introduced.
• No ::v-deep or /deep/ selectors were added.

AI usage

I used Codex (generative AI) to help implement and iterate this change, including component replacement and test updates.

DEEP disclosure:

• Disclose: AI was used for implementation support and troubleshooting local setup/build issues.
• Engage critically: I reviewed generated code for correctness and scope, ensuring no card refactor or unrelated changes were introduced.
• Edit: I refined AI-generated output (including styles and test updates) and removed/avoided out-of-scope changes.
• Process sharing: AI was used for drafting code and test scaffolding; final verification was done manually with local UI checks, linting, tests, and build.

[learning-equality-bot]

👋 Hi @Swoyamjeetcodes, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

• Contribution is aligned with our contributing guidelines

• Pull request description has correctly filled AI usage section & follows our AI guidance:

  AI guidance

  
  

  State explicitly whether you didn't use or used AI & how.

  If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:

  • Disclose — Be open about when you've used AI for support.
  • Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
  • Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
  • Process sharing — Explain how you used the AI so others can learn.

  
  

  Examples of good disclosures:

  "I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

  "I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

[learning-equality-bot]

📢✨ Before we assign a reviewer, we'll turn on @rtibblesbot to pre-review. Its comments are generated by an LLM, and should be evaluated accordingly.

[learning-equality-bot]

📢✨ Before we assign a reviewer, we'll invite community pre-review. See the community review guidance for both authors and reviewers.

[rtibblesbot]

Clean, well-scoped migration from Vuetify to KDS components. All replacements match the issue spec.

CI passing. Screenshots verified — loader, channel list, search, and empty state all render correctly.

• suggestion: One Vuetify utility class (grey--text) remains — see inline comment
• praise: Good RTL-aware styling and solid loader test coverage

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Reviewed the pull request diff checking for:

• Correctness: bugs, edge cases, undocumented behavior, resource leaks, hardcoded values
• Design: unnecessary complexity, naming, readability, comment accuracy, redundant state
• Architecture: duplicated concerns, minimal interfaces, composition over inheritance
• Testing: behavior-based assertions, mocks only at hard boundaries, accurate coverage
• Completeness: missing dependencies, unupdated usages, i18n, accessibility, security
• Principles: DRY (same reason to change), SRP, Rule of Three (no premature abstraction)
• Checked CI status and linked issue acceptance criteria
• For UI changes: inspected screenshots for layout, visual completeness, and consistency

[AadarshM07]

Nice work @Swoyamjeetcodes ,

I tested the changes locally. The layout, interactions, and functionality seems to be well preserved.

A couple of small suggestions you might consider:

• For the ChannelItem click handler (@click="handleSelectChannel") , It might be safer to explicitly pass channel.id. Even though it works currently. I think this would be the proper way of doing it.
• For KCheckbox, from what i understood the change event emits the new checked state (which is boolean), so it would be better to reformat it and use that value (reference: SearchOrBrowse:239).

Hope it helps, thank you. (community-review)

[sahibsiddiqui]

Nice work @Swoyamjeetcodes.

Reviewed the KCheckbox usage and i noticed it doesn't have a label prop set.
Without a label, screen readers will announce the checkbox without any context about which channel it represents.
Adding :label="channel.name" (or a visually hidden label if the design doesn't want visible text) would make this accessible for keyboard and screen reader users.

The KTextbox search input handles this correctly with :label="$tr('searchText')", so this would bring the checkbox in line with the same pattern.
(community-review)

[rtibblesbot]

Clean delta — the one suggestion from the prior review is resolved correctly.

CI passing. Screenshots cover all three states (loading, default list, empty search) and look correct.

Prior findings

Resolved:

• grey--text Vuetify utility class (suggestion) — removed from template; .no-channels-found now uses color: v-bind('$themeTokens.annotation') in scoped CSS

Not re-raised (praise):

• padding-inline / padding-inline-end RTL-aware logical properties
• Smart useKShow mock pattern in tests

1/1 prior findings resolved. 0 re-raised.

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

Compared the current PR state against findings from a prior review:

• Retrieved prior bot reviews deterministically via the GitHub API
• Classified each prior finding as RESOLVED, UNADDRESSED, ACKNOWLEDGED, or CONTESTED
• Only raised NEW findings for newly introduced code
• Reviewed the pull request diff checking for correctness, design, architecture, testing, completeness, and adherence to DRY/SRP principles
• Checked CI status and linked issue acceptance criteria

[akolson]

KCheckbox has no accessible name — screen readers will announce it as a plain "checkbox" with no context about which channel it refers to. Since the card content is the visual label, a visible label prop isn't the right fix here. Instead:

<KCheckbox
    :aria-label="channel.name"
    :aria-description="channel.description"
    ...
  />

:aria-label gives the checkbox its accessible name; :aria-description optionally adds the channel description as supplementary context without any visible UI change.

[akolson]

Hi @Swoyamjeetcodes! Great work on this PR, it’s looking great! I’ve left an accessibility concern that we’ll need to address before merging. Thanks!