From 22ce2ea0ca8b5ebb1866bb618dabd9aa9527e1f6 Mon Sep 17 00:00:00 2001
From: Swoyamjeetcodes <swoyamjeet333@gmail.com>
Date: Thu, 2 Apr 2026 20:49:40 +0530
Subject: [PATCH 1/3] migrate Select channels list layout/input from Vuetify to
 KDS (#5774)

---
 .../views/ChannelSet/ChannelSelectionList.vue | 85 ++++++++++++-------
 .../__tests__/channelSelectionList.spec.js    | 22 +++++
 2 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
index 78d274943d..fff14f0a05 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
@@ -1,24 +1,19 @@
 <template>
 
-  <VContainer
-    fluid
-    class="pa-0 pb-5"
-  >
-    <LoadingText
-      v-if="loading"
-      class="pt-4"
+  <div class="selection-list">
+    <StudioLargeLoader
+      v-if="show(loaderKey, loading, 400)"
+      class="selection-loader"
     />
     <template v-else>
-      <VTextField
+      <KTextbox
         v-model="search"
-        style="max-width: 350px"
-        class="mt-4"
-        box
+        class="search-input"
         :label="$tr('searchText')"
       />
       <p
         v-if="!listChannels.length"
-        class="grey--text mb-0 mt-4"
+        class="grey--text no-channels-found"
       >
         {{ $tr('noChannelsFound') }}
       </p>
@@ -28,29 +23,25 @@
           :key="channel.id"
           flat
           hover
-          class="list-card-hover px-3"
+          class="list-card-hover selection-card"
         >
-          <VLayout
-            align-center
-            row
-          >
-            <Checkbox
-              v-model="selectedChannels"
-              color="primary"
+          <div class="selection-row">
+            <KCheckbox
+              :checked="selectedChannels.includes(channel.id)"
               :data-testid="`checkbox-${channel.id}`"
-              :value="channel.id"
-              class="channel ma-0"
+              class="channel-checkbox"
+              @change="handleSelectChannel(channel.id)"
             />
             <ChannelItem
               :channelId="channel.id"
               :data-testid="`channel-item-${channel.id}`"
               @click="handleSelectChannel"
             />
-          </VLayout>
+          </div>
         </VCard>
       </template>
     </template>
-  </VContainer>
+  </div>
 
 </template>
 
@@ -58,11 +49,11 @@
 <script>
 
   import sortBy from 'lodash/sortBy';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import { mapGetters, mapActions } from 'vuex';
   import ChannelItem from './ChannelItem';
   import { ChannelListTypes } from 'shared/constants';
-  import Checkbox from 'shared/views/form/Checkbox';
-  import LoadingText from 'shared/views/LoadingText';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
 
   function listTypeValidator(value) {
     // The value must match one of the ListTypes
@@ -72,9 +63,12 @@
   export default {
     name: 'ChannelSelectionList',
     components: {
-      Checkbox,
       ChannelItem,
-      LoadingText,
+      StudioLargeLoader,
+    },
+    setup() {
+      const { show } = useKShow();
+      return { show };
     },
     props: {
       value: {
@@ -117,6 +111,9 @@
           'name',
         );
       },
+      loaderKey() {
+        return `channel-selection-list-${this.listType}`;
+      },
     },
     mounted() {
       this.loading = true;
@@ -146,12 +143,36 @@
 
 <style lang="scss" scoped>
 
-  .add-channel-button {
-    margin: 0;
+  .selection-list {
+    padding-bottom: 20px;
+  }
+
+  .selection-loader {
+    padding-top: 16px;
+  }
+
+  .search-input {
+    max-width: 350px;
+    margin-top: 16px;
   }
 
-  .channel /deep/ .k-checkbox {
-    vertical-align: middle;
+  .no-channels-found {
+    margin-top: 16px;
+    margin-bottom: 0;
+  }
+
+  .selection-card {
+    padding-inline: 12px;
+  }
+
+  .selection-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .channel-checkbox {
+    margin: 0;
+    padding-inline-end: 4px;
   }
 
   .list-card-hover {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js
index 4ea4aa9aac..f6796efc33 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js
@@ -5,6 +5,13 @@ import { Store } from 'vuex';
 import ChannelSelectionList from '../ChannelSelectionList';
 import { ChannelListTypes } from 'shared/constants';
 
+jest.mock('kolibri-design-system/lib/composables/useKShow', () => ({
+  __esModule: true,
+  default: () => ({
+    show: (_id, loading) => loading,
+  }),
+}));
+
 const searchWord = 'search test';
 
 const editChannel = {
@@ -84,6 +91,21 @@ describe('ChannelSelectionList', () => {
     expect(screen.queryByText(publicChannel.name)).not.toBeInTheDocument();
   });
 
+  it('shows loader while the channel list is loading', async () => {
+    let resolveLoad;
+    const loadingPromise = new Promise(resolve => {
+      resolveLoad = resolve;
+    });
+    mockActions.loadChannelList.mockReturnValueOnce(loadingPromise);
+
+    await renderComponent();
+
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+
+    resolveLoad();
+    expect(await screen.findByLabelText('Search for a channel')).toBeInTheDocument();
+  });
+
   it('filters the channel list when the user types in the search box', async () => {
     const user = userEvent.setup();
     await renderComponent();

From 5f77bae5d8a2c122df3f6f80ca569877c87fa30b Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Sun, 5 Apr 2026 04:56:32 +0000
Subject: [PATCH 2/3] [pre-commit.ci lite] apply automatic fixes

---
 .../channelList/views/ChannelSet/ChannelSelectionList.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
index fff14f0a05..c4b9ac12bb 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
@@ -171,8 +171,8 @@
   }
 
   .channel-checkbox {
-    margin: 0;
     padding-inline-end: 4px;
+    margin: 0;
   }
 
   .list-card-hover {

From cffaf3ae31a679d0e1581361625ae12872c46071 Mon Sep 17 00:00:00 2001
From: Swoyamjeetcodes <swoyamjeet333@gmail.com>
Date: Sun, 5 Apr 2026 12:53:17 +0530
Subject: [PATCH 3/3] replace Vuetify grey--text with KDS annotation token

---
 .../channelList/views/ChannelSet/ChannelSelectionList.vue      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
index c4b9ac12bb..73b2e1cc4d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue
@@ -13,7 +13,7 @@
       />
       <p
         v-if="!listChannels.length"
-        class="grey--text no-channels-found"
+        class="no-channels-found"
       >
         {{ $tr('noChannelsFound') }}
       </p>
@@ -159,6 +159,7 @@
   .no-channels-found {
     margin-top: 16px;
     margin-bottom: 0;
+    color: v-bind('$themeTokens.annotation');
   }
 
   .selection-card {