From 92b6e56b57187a71e175b7cf8b50d99909445147 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 03:07:57 +0530
Subject: [PATCH 01/45] Created StudioCollectionsTable

---
 .../frontend/channelList/router.js            |   4 +-
 .../ChannelSet/StudioCollectionsTable.vue     | 439 ++++++++++++++++++
 2 files changed, 441 insertions(+), 2 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index 533057ef1b..a2761c5eb6 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import ChannelList from './views/Channel/ChannelList';
-import ChannelSetList from './views/ChannelSet/ChannelSetList';
+import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable.vue';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
 import { RouteNames } from './constants';
@@ -21,7 +21,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CHANNEL_SETS,
       path: '/collections',
-      component: ChannelSetList,
+      component: StudioCollectionsTable,
     },
     {
       name: RouteNames.NEW_CHANNEL_SET,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
new file mode 100644
index 0000000000..e4f2cd6672
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -0,0 +1,439 @@
+<template>
+
+  <KPageContainer>
+    <div class="table-header">
+      <div class="header-left">
+        <KButton
+          appearance="basic-link"
+          class="info-link"
+          @click="infoDialog = true"
+        >
+          {{ $tr('aboutChannelSetsLink') }}
+        </KButton>
+
+        <KModal
+          v-if="infoDialog"
+          :title="$tr('aboutChannelSets')"
+          :cancelText="$tr('cancelButtonLabel')"
+          @cancel="infoDialog = false"
+        >
+          <div class="info-content">
+            <p>{{ $tr('channelSetsDescriptionText') }}</p>
+            <p>{{ $tr('channelSetsInstructionsText') }}</p>
+            <p class="disclaimer">{{ $tr('channelSetsDisclaimer') }}</p>
+          </div>
+        </KModal>
+      </div>
+
+      <div class="header-right">
+        <KButton
+          v-if="!loading"
+          appearance="raised-button"
+          primary
+          data-test="add-channelset"
+          :text="$tr('addChannelSetTitle')"
+          @click="newChannelSet"
+        />
+      </div>
+    </div>
+
+    <div class="table-container">
+      <template v-if="loading">
+        <LoadingText />
+      </template>
+
+      <p
+        v-else-if="!channelSets.length"
+        class="no-collections-message"
+      >
+        {{ $tr('noChannelSetsFound') }}
+      </p>
+
+      <KTable
+        v-else
+        class="collections-table"
+        :stickyColumns="stickyColumns"
+        caption
+        :headers="tableHeaders"
+        :rows="tableRows"
+        :dataLoading="loading"
+        :emptyMessage="$tr('noChannelSetsFound')"
+        sortable
+        @changeSort="changeSortHandler"
+      >
+        <template #cell="{ content, colIndex }">
+          <!-- Column 0: Collection Name -->
+          <div
+            v-if="colIndex === 0"
+            class="collection-name-cell"
+          >
+            <div class="collection-info">
+              <h3
+                class="collection-title notranslate"
+                dir="auto"
+              >
+                {{ content }}
+              </h3>
+            </div>
+          </div>
+
+          <!-- Column 1: Tokens -->
+          <div
+            v-else-if="colIndex === 1"
+            class="tokens-cell"
+          >
+            <StudioCopyToken
+              v-if="content"
+              :token="content"
+              class="token-item"
+            />
+            <em
+              v-else
+              class="saving-text"
+            >
+              {{ $tr('saving') }}
+            </em>
+          </div>
+
+          <!-- Column 2: Channel Count -->
+          <div
+            v-else-if="colIndex === 2"
+            class="channel-count"
+          >
+            {{ $formatNumber(content) }}
+          </div>
+
+          <!-- Column 3: Actions -->
+          <div
+            v-else-if="colIndex === 3"
+            class="actions-cell"
+          >
+            <KIconButton
+              icon="optionsVertical"
+              :aria-label="$tr('options')"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :options="dropdownOptions"
+                  :hasIcons="true"
+                  @select="option => handleOptionSelect(option, content)"
+                />
+              </template>
+            </KIconButton>
+          </div>
+        </template>
+      </KTable>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <KModal
+      v-if="deleteDialog"
+      :title="$tr('deleteChannelSetTitle')"
+      :submitText="$tr('delete')"
+      :cancelText="$tr('cancel')"
+      @submit="confirmDelete"
+      @cancel="deleteDialog = false"
+    >
+      <p>{{ $tr('deleteChannelSetText') }}</p>
+    </KModal>
+  </KPageContainer>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import { RouteNames } from '../../constants';
+  import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
+  import LoadingText from 'shared/views/LoadingText';
+
+  export default {
+    name: 'StudioCollectionsTable',
+    components: {
+      StudioCopyToken,
+      LoadingText,
+    },
+    data() {
+      return {
+        loading: true,
+        infoDialog: false,
+        deleteDialog: false,
+        collectionToDelete: null,
+      };
+    },
+    computed: {
+      ...mapGetters('channelSet', ['channelSets', 'getChannelSet']),
+
+      tableHeaders() {
+        return [
+          {
+            label: this.$tr('title'),
+            dataType: 'string',
+            minWidth: '300px',
+            width: '40%',
+            columnId: 'name',
+          },
+          {
+            label: this.$tr('token'),
+            dataType: 'string',
+            minWidth: '224px',
+            width: '30%',
+            columnId: 'tokens',
+          },
+          {
+            label: this.$tr('channelNumber'),
+            dataType: 'number',
+            minWidth: '120px',
+            width: '15%',
+            columnId: 'channel_count',
+            align: 'right',
+          },
+          {
+            label: '',
+            dataType: 'undefined',
+            width: '15%',
+            columnId: 'actions',
+            align: 'center',
+          },
+        ];
+      },
+
+      tableRows() {
+        if (!this.channelSets || !Array.isArray(this.channelSets)) {
+          return [];
+        }
+
+        return this.channelSets.map(collection => {
+          // Use getChannelSet to get proper format with channels as array
+          const channelSet = this.getChannelSet(collection.id);
+          const channelCount = channelSet && channelSet.channels ? channelSet.channels.length : 0;
+
+          return [
+            collection.name || '',
+            collection.secret_token || null,
+            channelCount,
+            collection.id,
+          ];
+        });
+      },
+
+      stickyColumns() {
+        return ['first', 'last'];
+      },
+
+      dropdownOptions() {
+        return [
+          {
+            label: this.$tr('edit'),
+            value: 'edit',
+            icon: 'edit',
+          },
+          {
+            label: this.$tr('delete'),
+            value: 'delete',
+            icon: 'trash',
+          },
+        ];
+      },
+    },
+    mounted() {
+      this.loadChannelSetList().then(() => {
+        this.loading = false;
+      });
+    },
+    methods: {
+      ...mapActions('channelSet', ['loadChannelSetList', 'deleteChannelSet']),
+
+      handleOptionSelect(option, collectionId) {
+        if (option.value === 'edit') {
+          this.$router.push({
+            name: RouteNames.CHANNEL_SET_DETAILS,
+            params: { channelSetId: collectionId },
+          });
+        } else if (option.value === 'delete') {
+          // Use the Vuex getter to get the proper channelSet object
+          const channelSet = this.getChannelSet(collectionId);
+          if (channelSet) {
+            this.collectionToDelete = channelSet;
+            this.deleteDialog = true;
+          } else {
+            // Fallback: try to find in the channelSets array
+            const collection = this.channelSets.find(c => c.id === collectionId);
+            if (collection) {
+              this.collectionToDelete = collection;
+              this.deleteDialog = true;
+            }
+          }
+        }
+      },
+
+      confirmDelete() {
+        if (this.collectionToDelete) {
+          const collectionName = this.collectionToDelete.name || 'Collection';
+
+          this.deleteChannelSet(this.collectionToDelete)
+            .then(() => {
+              this.deleteDialog = false;
+              this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbar', {
+                text: this.$tr('deleteSuccess', { name: collectionName }),
+              });
+            })
+            .catch(() => {
+              this.deleteDialog = false;
+              this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbar', {
+                text: this.$tr('deleteError', { name: collectionName }),
+                autoDismiss: false,
+              });
+            });
+        }
+      },
+
+      newChannelSet() {
+        this.$router.push({
+          name: RouteNames.NEW_CHANNEL_SET,
+        });
+      },
+    },
+    $trs: {
+      aboutChannelSetsLink: 'Learn about collections',
+      aboutChannelSets: 'About collections',
+      channelSetsDescriptionText:
+        'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',
+      channelSetsInstructionsText:
+        'You can make a collection by selecting the channels you want to be imported together.',
+      channelSetsDisclaimer:
+        'You will need Kolibri version 0.12.0 or higher to import channel collections',
+      cancelButtonLabel: 'Close',
+      addChannelSetTitle: 'New collection',
+      noChannelSetsFound:
+        'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
+
+      title: 'Collection name',
+      token: 'Token ID',
+      channelNumber: 'Number of channels',
+      options: 'Options',
+      deleteChannelSetTitle: 'Delete collection',
+      deleteChannelSetText: 'Are you sure you want to delete this collection?',
+      cancel: 'Cancel',
+      edit: 'Edit collection',
+      delete: 'Delete collection',
+      saving: 'Saving',
+      deleteSuccess: "'{name}' deleted successfully",
+      deleteError: "Failed to delete '{name}'. Please try again.",
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .table-header {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  }
+
+  .header-left,
+  .header-right {
+    display: flex;
+    align-items: center;
+  }
+
+  .info-link {
+    margin: 0;
+  }
+
+  .table-container {
+    width: 100%;
+  }
+
+  .collections-table {
+    position: relative;
+  }
+
+  .no-collections-message {
+    margin: 40px 0;
+    color: var(--grey-600);
+    text-align: center;
+  }
+
+  .collection-name-cell {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .collection-info {
+    flex: 1;
+  }
+
+  .collection-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .tokens-cell {
+    display: flex;
+    align-items: center;
+    min-height: 40px;
+  }
+
+  .token-item {
+    margin-right: 8px;
+  }
+
+  .saving-text {
+    font-style: italic;
+    color: var(--grey-500);
+  }
+
+  .channel-count {
+    font-size: 14px;
+    text-align: right;
+  }
+
+  .actions-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .info-content {
+    line-height: 1.5;
+  }
+
+  .info-content p {
+    margin-bottom: 16px;
+  }
+
+  .disclaimer {
+    font-weight: 500;
+    color: var(--red-500);
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .table-header {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .header-left,
+    .header-right {
+      justify-content: center;
+    }
+
+    .collection-title {
+      font-size: 13px;
+    }
+  }
+
+</style>

From f2cef2a7350d32da872b48c2b03c6275a5031420 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 03:30:52 +0530
Subject: [PATCH 02/45] Updated ktable to remove sortable
 propStudioCollectionsTable

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index e4f2cd6672..6d6b6864d2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -58,8 +58,6 @@
         :rows="tableRows"
         :dataLoading="loading"
         :emptyMessage="$tr('noChannelSetsFound')"
-        sortable
-        @changeSort="changeSortHandler"
       >
         <template #cell="{ content, colIndex }">
           <!-- Column 0: Collection Name -->

From 1d81d2f82661d292cac95cd3d7170943228d0ea6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 19:42:52 +0530
Subject: [PATCH 03/45] Remove responsiveness as not needed

---
 .../ChannelSet/StudioCollectionsTable.vue      | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 6d6b6864d2..3de465ff2a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -358,7 +358,6 @@
 
   .no-collections-message {
     margin: 40px 0;
-    color: var(--grey-600);
     text-align: center;
   }
 
@@ -417,21 +416,4 @@
     color: var(--red-500);
   }
 
-  /* Responsive design */
-  @media (max-width: 768px) {
-    .table-header {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .header-left,
-    .header-right {
-      justify-content: center;
-    }
-
-    .collection-title {
-      font-size: 13px;
-    }
-  }
-
 </style>

From 646c59a257714862ebd7edca016807a1f475fe3f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 19:53:51 +0530
Subject: [PATCH 04/45] added proper stles

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 3de465ff2a..a577c4830d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -87,6 +87,7 @@
             />
             <em
               v-else
+              :style="{ color: $themeTokens.annotation }"
               class="saving-text"
             >
               {{ $tr('saving') }}
@@ -389,7 +390,6 @@
 
   .saving-text {
     font-style: italic;
-    color: var(--grey-500);
   }
 
   .channel-count {

From 0ecc0a46e331f599470b3535d9a190410b1816af Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 21:27:27 +0530
Subject: [PATCH 05/45] Updated Styles

---
 .../views/ChannelSet/StudioCollectionsTable.vue     | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index a577c4830d..ed29ccca01 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -20,7 +20,12 @@
           <div class="info-content">
             <p>{{ $tr('channelSetsDescriptionText') }}</p>
             <p>{{ $tr('channelSetsInstructionsText') }}</p>
-            <p class="disclaimer">{{ $tr('channelSetsDisclaimer') }}</p>
+            <p
+              class="disclaimer"
+              :style="{ color: $themeTokens.error }"
+            >
+              {{ $tr('channelSetsDisclaimer') }}
+            </p>
           </div>
         </KModal>
       </div>
@@ -379,7 +384,6 @@
   }
 
   .tokens-cell {
-    display: flex;
     align-items: center;
     min-height: 40px;
   }
@@ -411,9 +415,4 @@
     margin-bottom: 16px;
   }
 
-  .disclaimer {
-    font-weight: 500;
-    color: var(--red-500);
-  }
-
 </style>

From 77e3b8c1a20efb9fbc0f239adffeb4e3db51d813 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 21:45:29 +0530
Subject: [PATCH 06/45] Updated Styles

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index ed29ccca01..11a44f8b14 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -89,6 +89,7 @@
               v-if="content"
               :token="content"
               class="token-item"
+              :loading="!content"
             />
             <em
               v-else
@@ -378,7 +379,6 @@
 
   .collection-title {
     margin: 0;
-    font-size: 14px;
     font-weight: 600;
     line-height: 1.4;
   }
@@ -397,7 +397,6 @@
   }
 
   .channel-count {
-    font-size: 14px;
     text-align: right;
   }
 

From 99855932f7c4060afac9fda91824f182e78ca670 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 23:12:41 +0530
Subject: [PATCH 07/45] created StudioCollectionsTable

---
 .../__tests__/StudioCollectionsTable.spec.js  | 208 ++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
new file mode 100644
index 0000000000..a750c0a81d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -0,0 +1,208 @@
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
+import VueRouter from 'vue-router';
+import StudioCollectionsTable from '../StudioCollectionsTable.vue';
+import { RouteNames } from '../../../constants';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+const mockChannelSets = [
+  {
+    id: 'collection-1',
+    name: 'Test Collection 1',
+    secret_token: 'token-123',
+    channels: ['channel-1', 'channel-2'],
+  },
+  {
+    id: 'collection-2',
+    name: 'Test Collection 2',
+    secret_token: null,
+    channels: ['channel-3'],
+  },
+];
+
+const mockActions = {
+  loadChannelSetList: jest.fn(() => Promise.resolve()),
+  deleteChannelSet: jest.fn(() => Promise.resolve()),
+};
+
+const createMockStore = () => {
+  return new Store({
+    modules: {
+      channelSet: {
+        namespaced: true,
+        state: {},
+        getters: {
+          channelSets: () => mockChannelSets,
+          getChannelSet: () => id => mockChannelSets.find(cs => cs.id === id),
+        },
+        actions: mockActions,
+      },
+    },
+    actions: {
+      showSnackbar: jest.fn(),
+    },
+  });
+};
+
+const renderComponent = async (options = {}) => {
+  const store = options.store || createMockStore();
+  const router = new VueRouter({
+    routes: [
+      {
+        name: RouteNames.CHANNEL_SETS,
+        path: '/collections',
+        component: StudioCollectionsTable,
+      },
+      {
+        name: RouteNames.NEW_CHANNEL_SET,
+        path: '/collections/new',
+        component: { template: '<div>New Channel Set</div>' },
+      },
+      {
+        name: RouteNames.CHANNEL_SET_DETAILS,
+        path: '/collections/:channelSetId',
+        component: { template: '<div>Channel Set Details</div>' },
+      },
+    ],
+  });
+
+  router.push({ name: RouteNames.CHANNEL_SETS });
+
+  const result = render(StudioCollectionsTable, {
+    localVue,
+    store,
+    router,
+    ...options,
+  });
+
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  return { ...result, router };
+};
+
+describe('StudioCollectionsTable', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should display channel sets in table when data is loaded', async () => {
+    await renderComponent();
+
+    expect(screen.getByText('Test Collection 1')).toBeInTheDocument();
+    expect(screen.getByText('Test Collection 2')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+  });
+
+  it('should display empty message when no collections are present', async () => {
+    const emptyStore = new Store({
+      modules: {
+        channelSet: {
+          namespaced: true,
+          state: {},
+          getters: {
+            channelSets: () => [],
+            getChannelSet: () => () => null,
+          },
+          actions: mockActions,
+        },
+      },
+      actions: {
+        showSnackbar: jest.fn(),
+      },
+    });
+
+    await renderComponent({ store: emptyStore });
+
+    const emptyMessageElement = screen.getByText((content, element) => {
+      return (
+        element?.classList?.contains('no-collections-message') &&
+        element.textContent.includes(
+          'You can package together multiple channels to create a collection',
+        )
+      );
+    });
+    expect(emptyMessageElement).toBeInTheDocument();
+  });
+
+  it('should open info modal when "Learn about collections" link is clicked', async () => {
+    const user = userEvent.setup();
+    await renderComponent();
+
+    const infoLink = screen.getByText('Learn about collections');
+    await user.click(infoLink);
+
+    expect(screen.getByText('About collections')).toBeInTheDocument();
+
+    const modal = screen.getByRole('dialog');
+    expect(
+      within(modal).getByText(
+        'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should navigate to new channel set page when "New collection" button is clicked', async () => {
+    const user = userEvent.setup();
+    const { router } = await renderComponent();
+
+    const newCollectionButton = screen.getByRole('button', { name: /new collection/i });
+    await user.click(newCollectionButton);
+
+    expect(router.currentRoute.name).toBe(RouteNames.NEW_CHANNEL_SET);
+  });
+
+  it('should navigate to edit page when edit option is selected', async () => {
+    const user = userEvent.setup();
+    const { router } = await renderComponent();
+
+    const optionsButtons = screen.getAllByLabelText(/options/i);
+    await user.click(optionsButtons[0]);
+
+    const editOption = screen.getByText('Edit collection');
+    await user.click(editOption);
+
+    expect(router.currentRoute.name).toBe(RouteNames.CHANNEL_SET_DETAILS);
+    expect(router.currentRoute.params.channelSetId).toBe('collection-1');
+  });
+
+  it('should call delete action when delete is confirmed', async () => {
+    const user = userEvent.setup();
+    await renderComponent();
+
+    const optionsButtons = screen.getAllByLabelText(/options/i);
+    await user.click(optionsButtons[0]);
+
+    const deleteOption = screen.getByText('Delete collection');
+    await user.click(deleteOption);
+
+    const deleteConfirmationModal = screen.getByRole('dialog');
+
+    expect(
+      within(deleteConfirmationModal).getByRole('heading', {
+        name: 'Delete collection',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(deleteConfirmationModal).getByText('Are you sure you want to delete this collection?'),
+    ).toBeInTheDocument();
+
+    const deleteButton = within(deleteConfirmationModal).getByRole('button', {
+      name: 'Delete collection',
+    });
+    await user.click(deleteButton);
+
+    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(
+      expect.any(Object),
+      expect.objectContaining({
+        id: 'collection-1',
+        name: 'Test Collection 1',
+      }),
+    );
+  });
+});

From 493980c37c08356b98c42266e902c518d4abf838 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Tue, 4 Nov 2025 23:18:26 +0530
Subject: [PATCH 08/45] Updated test file

---
 .../__tests__/StudioCollectionsTable.spec.js  | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index a750c0a81d..e03737a44f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -112,22 +112,15 @@ describe('StudioCollectionsTable', () => {
           actions: mockActions,
         },
       },
-      actions: {
-        showSnackbar: jest.fn(),
-      },
     });
 
     await renderComponent({ store: emptyStore });
 
-    const emptyMessageElement = screen.getByText((content, element) => {
-      return (
-        element?.classList?.contains('no-collections-message') &&
-        element.textContent.includes(
-          'You can package together multiple channels to create a collection',
-        )
-      );
-    });
-    expect(emptyMessageElement).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
+      ),
+    ).toBeInTheDocument();
   });
 
   it('should open info modal when "Learn about collections" link is clicked', async () => {
@@ -188,9 +181,6 @@ describe('StudioCollectionsTable', () => {
         name: 'Delete collection',
       }),
     ).toBeInTheDocument();
-    expect(
-      within(deleteConfirmationModal).getByText('Are you sure you want to delete this collection?'),
-    ).toBeInTheDocument();
 
     const deleteButton = within(deleteConfirmationModal).getByRole('button', {
       name: 'Delete collection',

From f3b7243a32c954dc63b6ee2d21c08485be55e603 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 00:33:59 +0530
Subject: [PATCH 09/45] Made few tweaks

---
 .../ChannelSet/StudioCollectionsTable.vue     | 41 +++++--------------
 .../__tests__/StudioCollectionsTable.spec.js  |  3 +-
 2 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 11a44f8b14..a10d36585a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -58,7 +58,7 @@
         v-else
         class="collections-table"
         :stickyColumns="stickyColumns"
-        caption
+        caption=""
         :headers="tableHeaders"
         :rows="tableRows"
         :dataLoading="loading"
@@ -175,21 +175,21 @@
           {
             label: this.$tr('title'),
             dataType: 'string',
-            minWidth: '300px',
+            minWidth: '200px',
             width: '40%',
             columnId: 'name',
           },
           {
             label: this.$tr('token'),
             dataType: 'string',
-            minWidth: '224px',
+            minWidth: '200px',
             width: '30%',
             columnId: 'tokens',
           },
           {
             label: this.$tr('channelNumber'),
             dataType: 'number',
-            minWidth: '120px',
+            minWidth: '100px',
             width: '15%',
             columnId: 'channel_count',
             align: 'right',
@@ -210,9 +210,8 @@
         }
 
         return this.channelSets.map(collection => {
-          // Use getChannelSet to get proper format with channels as array
           const channelSet = this.getChannelSet(collection.id);
-          const channelCount = channelSet && channelSet.channels ? channelSet.channels.length : 0;
+          const channelCount = channelSet?.channels?.length || 0;
 
           return [
             collection.name || '',
@@ -257,41 +256,25 @@
             params: { channelSetId: collectionId },
           });
         } else if (option.value === 'delete') {
-          // Use the Vuex getter to get the proper channelSet object
-          const channelSet = this.getChannelSet(collectionId);
-          if (channelSet) {
-            this.collectionToDelete = channelSet;
-            this.deleteDialog = true;
-          } else {
-            // Fallback: try to find in the channelSets array
-            const collection = this.channelSets.find(c => c.id === collectionId);
-            if (collection) {
-              this.collectionToDelete = collection;
-              this.deleteDialog = true;
-            }
-          }
+          this.collectionToDelete =
+            this.getChannelSet(collectionId) ||
+            this.channelSets.find(c => c.id === collectionId) ||
+            null;
+          if (this.collectionToDelete) this.deleteDialog = true;
         }
       },
 
       confirmDelete() {
         if (this.collectionToDelete) {
-          const collectionName = this.collectionToDelete.name || 'Collection';
-
           this.deleteChannelSet(this.collectionToDelete)
             .then(() => {
+              this.loadChannelSetList();
               this.deleteDialog = false;
               this.collectionToDelete = null;
-              this.$store.dispatch('showSnackbar', {
-                text: this.$tr('deleteSuccess', { name: collectionName }),
-              });
             })
             .catch(() => {
               this.deleteDialog = false;
               this.collectionToDelete = null;
-              this.$store.dispatch('showSnackbar', {
-                text: this.$tr('deleteError', { name: collectionName }),
-                autoDismiss: false,
-              });
             });
         }
       },
@@ -326,8 +309,6 @@
       edit: 'Edit collection',
       delete: 'Delete collection',
       saving: 'Saving',
-      deleteSuccess: "'{name}' deleted successfully",
-      deleteError: "Failed to delete '{name}'. Please try again.",
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index e03737a44f..ec89994673 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -2,6 +2,7 @@ import { render, screen, within } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
+import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import StudioCollectionsTable from '../StudioCollectionsTable.vue';
 import { RouteNames } from '../../../constants';
@@ -80,7 +81,7 @@ const renderComponent = async (options = {}) => {
     ...options,
   });
 
-  await new Promise(resolve => setTimeout(resolve, 0));
+  await nextTick();
 
   return { ...result, router };
 };

From 6e4c7e8a2112c9420ddaf7cf3f99f401c2e1a38f Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 00:42:34 +0530
Subject: [PATCH 10/45] Using ktable empty messgae prop

---
 .../views/ChannelSet/StudioCollectionsTable.vue      | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index a10d36585a..752e36829e 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -47,13 +47,6 @@
         <LoadingText />
       </template>
 
-      <p
-        v-else-if="!channelSets.length"
-        class="no-collections-message"
-      >
-        {{ $tr('noChannelSetsFound') }}
-      </p>
-
       <KTable
         v-else
         class="collections-table"
@@ -344,11 +337,6 @@
     position: relative;
   }
 
-  .no-collections-message {
-    margin: 40px 0;
-    text-align: center;
-  }
-
   .collection-name-cell {
     display: flex;
     align-items: flex-start;

From ba917fb6e9a8f2cb62ffe2dcb739f5f4fc3311dd Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 00:48:30 +0530
Subject: [PATCH 11/45] Made few tweaks

---
 contentcuration/contentcuration/frontend/channelList/router.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index a2761c5eb6..01aa769d29 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -1,6 +1,6 @@
 import VueRouter from 'vue-router';
 import ChannelList from './views/Channel/ChannelList';
-import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable.vue';
+import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
 import { RouteNames } from './constants';

From d3a347c6c83c91d78c1521e30c75ec72eeb6c3c9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 00:54:46 +0530
Subject: [PATCH 12/45] REplaced Loadingtext with STUdio large loader

---
 .../views/ChannelSet/StudioCollectionsTable.vue            | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 752e36829e..b4b4753388 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -44,7 +44,7 @@
 
     <div class="table-container">
       <template v-if="loading">
-        <LoadingText />
+        <StudioLargeLoader />
       </template>
 
       <KTable
@@ -144,13 +144,14 @@
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames } from '../../constants';
   import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
-  import LoadingText from 'shared/views/LoadingText';
+
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
 
   export default {
     name: 'StudioCollectionsTable',
     components: {
       StudioCopyToken,
-      LoadingText,
+      StudioLargeLoader,
     },
     data() {
       return {

From 197ad52897b2f8bd1e0e6c15db7ce0c21c932bda Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 01:17:23 +0530
Subject: [PATCH 13/45] Used Kmodal own loading feature

---
 .../views/ChannelSet/StudioCollectionsTable.vue          | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index b4b4753388..6ebbfea384 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -43,12 +43,7 @@
     </div>
 
     <div class="table-container">
-      <template v-if="loading">
-        <StudioLargeLoader />
-      </template>
-
       <KTable
-        v-else
         class="collections-table"
         :stickyColumns="stickyColumns"
         caption=""
@@ -145,13 +140,10 @@
   import { RouteNames } from '../../constants';
   import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
 
-  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
-
   export default {
     name: 'StudioCollectionsTable',
     components: {
       StudioCopyToken,
-      StudioLargeLoader,
     },
     data() {
       return {
@@ -292,7 +284,6 @@
       addChannelSetTitle: 'New collection',
       noChannelSetsFound:
         'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
-
       title: 'Collection name',
       token: 'Token ID',
       channelNumber: 'Number of channels',

From 4e5f6ae839a145d9f455f927a9b7b9fee32e8cb7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 01:20:52 +0530
Subject: [PATCH 14/45] Removed exces style

---
 .../ChannelSet/StudioCollectionsTable.vue     | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 6ebbfea384..941ab79561 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -321,52 +321,6 @@
     margin: 0;
   }
 
-  .table-container {
-    width: 100%;
-  }
-
-  .collections-table {
-    position: relative;
-  }
-
-  .collection-name-cell {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .collection-info {
-    flex: 1;
-  }
-
-  .collection-title {
-    margin: 0;
-    font-weight: 600;
-    line-height: 1.4;
-  }
-
-  .tokens-cell {
-    align-items: center;
-    min-height: 40px;
-  }
-
-  .token-item {
-    margin-right: 8px;
-  }
-
-  .saving-text {
-    font-style: italic;
-  }
-
-  .channel-count {
-    text-align: right;
-  }
-
-  .actions-cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .info-content {
     line-height: 1.5;
   }

From ad2e32cfb6172cc31d339f86b475a177a5491a84 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 10:31:50 +0530
Subject: [PATCH 15/45] Apllied Kpagecontainer class

---
 .../views/ChannelSet/StudioCollectionsTable.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 941ab79561..ac876b8dca 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <KPageContainer>
+  <KPageContainer class="page-container">
     <div class="table-header">
       <div class="header-left">
         <KButton
@@ -50,6 +50,8 @@
         :headers="tableHeaders"
         :rows="tableRows"
         :dataLoading="loading"
+        sortable
+        disableBuiltinSorting
         :emptyMessage="$tr('noChannelSetsFound')"
       >
         <template #cell="{ content, colIndex }">
@@ -302,6 +304,11 @@
 
 <style scoped>
 
+  .page-container {
+    width: 100%;
+    max-width: 1440px;
+  }
+
   .table-header {
     display: flex;
     flex-wrap: wrap;
@@ -317,14 +324,6 @@
     align-items: center;
   }
 
-  .info-link {
-    margin: 0;
-  }
-
-  .info-content {
-    line-height: 1.5;
-  }
-
   .info-content p {
     margin-bottom: 16px;
   }

From ff87cfdef16d1ded29d4ef47e3e541ff915a9e46 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 11:19:52 +0530
Subject: [PATCH 16/45] Added delete Channel snackbar

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index ac876b8dca..f2788b70a6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -259,10 +259,12 @@
               this.loadChannelSetList();
               this.deleteDialog = false;
               this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbarSimple', this.$tr('collectionDeleted'));
             })
             .catch(() => {
               this.deleteDialog = false;
               this.collectionToDelete = null;
+              this.$store.dispatch('showSnackbarSimple', this.$tr('deleteError'));
             });
         }
       },
@@ -296,6 +298,8 @@
       edit: 'Edit collection',
       delete: 'Delete collection',
       saving: 'Saving',
+      collectionDeleted: 'Collection  deleted',
+      deleteError: 'Error deleting collection',
     },
   };
 

From 18cc188f09434b97baff67ed2fc9a1be1634bcdf Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 12:03:03 +0530
Subject: [PATCH 17/45] done

---
 .../ChannelSet/__tests__/StudioCollectionsTable.spec.js    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index ec89994673..caeba6c7d8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/vue';
+import { render, screen, within, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
@@ -45,7 +45,7 @@ const createMockStore = () => {
       },
     },
     actions: {
-      showSnackbar: jest.fn(),
+      showSnackbarSimple: jest.fn(),
     },
   });
 };
@@ -80,6 +80,9 @@ const renderComponent = async (options = {}) => {
     router,
     ...options,
   });
+  await waitFor(() => {
+    expect(mockActions.loadChannelSetList).toHaveBeenCalled();
+  });
 
   await nextTick();
 

From ecf9ca20628f478b420beb3357d75eaf9ce9a9e2 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 12:13:07 +0530
Subject: [PATCH 18/45] center aligned kpagecontainer elements

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index f2788b70a6..3bd6b2efb0 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -311,6 +311,7 @@
   .page-container {
     width: 100%;
     max-width: 1440px;
+    margin: 0 auto;
   }
 
   .table-header {

From fb72691b33841f37ab3904243a92ab1a1dd58992 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 12:29:58 +0530
Subject: [PATCH 19/45] Updated colum width

---
 .../views/ChannelSet/StudioCollectionsTable.vue       | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 3bd6b2efb0..dcbf63f566 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -164,7 +164,7 @@
             label: this.$tr('title'),
             dataType: 'string',
             minWidth: '200px',
-            width: '40%',
+            width: '45%',
             columnId: 'name',
           },
           {
@@ -180,14 +180,12 @@
             minWidth: '100px',
             width: '15%',
             columnId: 'channel_count',
-            align: 'right',
           },
           {
             label: '',
             dataType: 'undefined',
-            width: '15%',
+            width: '10%',
             columnId: 'actions',
-            align: 'center',
           },
         ];
       },
@@ -333,4 +331,9 @@
     margin-bottom: 16px;
   }
 
+  .actions-cell {
+    display: flex;
+    justify-content: flex-end;
+  }
+
 </style>

From a2f21cddffe3b3c6a7b0d1501b40ba3db6940c60 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 5 Nov 2025 12:37:01 +0530
Subject: [PATCH 20/45] Updated colum width

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index dcbf63f566..9c45a691b8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -164,14 +164,14 @@
             label: this.$tr('title'),
             dataType: 'string',
             minWidth: '200px',
-            width: '45%',
+            width: '55%',
             columnId: 'name',
           },
           {
             label: this.$tr('token'),
             dataType: 'string',
             minWidth: '200px',
-            width: '30%',
+            width: '20%',
             columnId: 'tokens',
           },
           {

From 6f910cb51e118e57b5419290c284f9388991b3ed Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 7 Nov 2025 17:33:06 +0530
Subject: [PATCH 21/45] updated

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 9c45a691b8..489430fcf7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -304,7 +304,7 @@
 </script>
 
 
-<style scoped>
+<style lang="scss" scoped>
 
   .page-container {
     width: 100%;

From d4524382094dd949b698025622cdd52117b21a65 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 9 Nov 2025 01:03:27 +0530
Subject: [PATCH 22/45] Center aligned empty text

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 489430fcf7..402d0a10d1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -310,6 +310,7 @@
     width: 100%;
     max-width: 1440px;
     margin: 0 auto;
+    text-align: center;
   }
 
   .table-header {

From 5e8cd3aba1360284ab99433249c917b3d1a1def1 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 19 Nov 2025 22:51:02 +0530
Subject: [PATCH 23/45] Updated tests

---
 .../ChannelSet/__tests__/StudioCollectionsTable.spec.js     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index caeba6c7d8..90cd753ab2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -134,7 +134,7 @@ describe('StudioCollectionsTable', () => {
     const infoLink = screen.getByText('Learn about collections');
     await user.click(infoLink);
 
-    expect(screen.getByText('About collections')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'About collections' })).toBeInTheDocument();
 
     const modal = screen.getByRole('dialog');
     expect(
@@ -158,7 +158,7 @@ describe('StudioCollectionsTable', () => {
     const user = userEvent.setup();
     const { router } = await renderComponent();
 
-    const optionsButtons = screen.getAllByLabelText(/options/i);
+    const optionsButtons = screen.getAllByRole('button', { name: /options/i });
     await user.click(optionsButtons[0]);
 
     const editOption = screen.getByText('Edit collection');
@@ -172,7 +172,7 @@ describe('StudioCollectionsTable', () => {
     const user = userEvent.setup();
     await renderComponent();
 
-    const optionsButtons = screen.getAllByLabelText(/options/i);
+    const optionsButtons = screen.getAllByRole('button', { name: /options/i });
     await user.click(optionsButtons[0]);
 
     const deleteOption = screen.getByText('Delete collection');

From 1142956fa3df938424258fea096500588839f36e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 19 Nov 2025 23:04:48 +0530
Subject: [PATCH 24/45] Made table header to center align when maxwidth<500px

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 402d0a10d1..2f26b6d902 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -336,5 +336,10 @@
     display: flex;
     justify-content: flex-end;
   }
+  @media (max-width: 500px) {
+    .table-header {
+      justify-content: center;
+    }
+  }
 
 </style>

From 2f67acf7045db33c72a83da3cf5a3698e20e7332 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 17:21:06 +0530
Subject: [PATCH 25/45] Delete channelsettime channelsetlist

---
 .../views/ChannelSet/ChannelSetItem.vue       | 143 --------------
 .../views/ChannelSet/ChannelSetList.vue       | 175 ------------------
 .../__tests__/channelSetItem.spec.js          | 102 ----------
 .../__tests__/channelSetList.spec.js          |  32 ----
 4 files changed, 452 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
 delete mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
 delete mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
 delete mode 100644 contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetList.spec.js

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
deleted file mode 100644
index e6652dae20..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-
-  <tr :to="channelSetDetailsLink">
-    <td
-      class="notranslate"
-      dir="auto"
-    >
-      {{ channelSet.name }}
-    </td>
-    <td style="width: 224px">
-      <CopyToken
-        v-if="channelSet.secret_token"
-        :token="channelSet.secret_token"
-      />
-      <!-- TODO: Remove this once syncNow is ready for use -->
-      <em
-        v-else
-        class="grey--text"
-      >{{ $tr('saving') }}</em>
-    </td>
-    <td class="text-xs-right">
-      {{ $formatNumber(channelCount) }}
-    </td>
-    <td class="text-xs-right">
-      <KButton
-        :text="$tr('options')"
-        appearance="flat-button"
-        :hasDropdown="true"
-      >
-        <template #menu>
-          <KDropdownMenu
-            :options="dropdownOptions"
-            :hasIcons="true"
-            :constrainToScrollParent="false"
-            @select="handleOptionSelect"
-          />
-        </template>
-      </KButton>
-      <KModal
-        v-if="deleteDialog"
-        :title="$tr('deleteChannelSetTitle')"
-        :submitText="$tr('deleteChannelSetTitle')"
-        :cancelText="$tr('cancel')"
-        :appendToOverlay="true"
-        @submit="handleDelete"
-        @cancel="deleteDialog = false"
-      >
-        {{ $tr('deleteChannelSetText') }}
-      </KModal>
-    </td>
-  </tr>
-
-</template>
-
-
-<script>
-
-  import { mapActions, mapGetters } from 'vuex';
-  import { RouteNames } from '../../constants';
-  import CopyToken from 'shared/views/CopyToken';
-
-  export default {
-    name: 'ChannelSetItem',
-    components: {
-      CopyToken,
-    },
-    props: {
-      channelSetId: {
-        type: String,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        deleteDialog: false,
-      };
-    },
-    computed: {
-      ...mapGetters('channelSet', ['getChannelSet']),
-      channelSet() {
-        return this.getChannelSet(this.channelSetId);
-      },
-      channelSetDetailsLink() {
-        return {
-          name: RouteNames.CHANNEL_SET_DETAILS,
-          params: { channelSetId: this.channelSet.id },
-        };
-      },
-      channelCount() {
-        return this.channelSet && this.channelSet.channels
-          ? this.channelSet.channels.filter(c => c).length
-          : 0;
-      },
-      dropdownOptions() {
-        return [
-          {
-            label: this.$tr('edit'),
-            value: 'edit',
-            icon: 'edit',
-          },
-          {
-            label: this.$tr('delete'),
-            value: 'delete',
-            icon: 'trash',
-          },
-        ];
-      },
-    },
-    methods: {
-      ...mapActions('channelSet', ['deleteChannelSet']),
-      handleOptionSelect(option) {
-        if (option.value === 'edit') {
-          this.$router.push(this.channelSetDetailsLink);
-        } else if (option.value === 'delete') {
-          this.deleteDialog = true;
-        }
-      },
-      handleDelete() {
-        this.deleteChannelSet(this.channelSet);
-        this.deleteDialog = false;
-      },
-    },
-    $trs: {
-      deleteChannelSetTitle: 'Delete collection',
-      deleteChannelSetText: 'Are you sure you want to delete this collection?',
-      cancel: 'Cancel',
-      edit: 'Edit collection',
-      delete: 'Delete collection',
-      options: 'Options',
-      saving: 'Saving',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  td {
-    font-size: 12pt !important;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
deleted file mode 100644
index a9cd0fe7ea..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-
-  <VContainer
-    class="list-items"
-    fluid
-  >
-    <VLayout
-      row
-      wrap
-      align-center
-      justify-space-between
-      class="pb-2"
-    >
-      <VFlex class="text-xs-left">
-        <KButton
-          v-if="!loading && channelSets && channelSets.length"
-          :text="$tr('aboutChannelSetsLink')"
-          class="link-btn"
-          appearance="basic-link"
-          @click="infoDialog = true"
-        />
-      </VFlex>
-
-      <VFlex
-        class="text-xs-right"
-        shrink="0"
-      >
-        <KButton
-          v-if="!loading"
-          appearance="raised-button"
-          primary
-          data-test="add-channelset"
-          :text="$tr('addChannelSetTitle')"
-          @click="newChannelSet"
-        />
-      </VFlex>
-    </VLayout>
-
-    <VLayout
-      row
-      justify-center
-      class="pt-2"
-    >
-      <VFlex xs12>
-        <template v-if="loading">
-          <LoadingText />
-        </template>
-
-        <template v-else-if="channelSets && !channelSets.length">
-          <div class="mt-4 p-2 text-xs-center">
-            <p class="mb-0">{{ $tr('noChannelSetsFound') }}</p>
-            <KButton
-              :text="$tr('aboutChannelSetsLink')"
-              class="link-btn"
-              appearance="basic-link"
-              @click="infoDialog = true"
-            />
-          </div>
-        </template>
-
-        <template v-else>
-          <VDataTable
-            :headers="headers"
-            :items="sortedChannelSets"
-            hide-actions
-          >
-            <template #items="{ item }">
-              <ChannelSetItem :channelSetId="item.id" />
-            </template>
-          </VDataTable>
-        </template>
-      </VFlex>
-    </VLayout>
-
-    <KModal
-      v-if="infoDialog"
-      :cancelText="$tr('cancelButtonLabel')"
-      :title="$tr('aboutChannelSets')"
-      @cancel="infoDialog = false"
-    >
-      <div>
-        <p>{{ $tr('channelSetsDescriptionText') }}</p>
-        <p>{{ $tr('channelSetsInstructionsText') }}</p>
-        <p :class="$computedClass(channelSetsDisclamerStyle)">
-          {{ $tr('channelSetsDisclaimer') }}
-        </p>
-      </div>
-    </KModal>
-  </VContainer>
-
-</template>
-
-
-<script>
-
-  import sortBy from 'lodash/sortBy';
-  import { mapGetters, mapActions } from 'vuex';
-  import { RouteNames } from '../../constants';
-  import ChannelSetItem from './ChannelSetItem.vue';
-  import LoadingText from 'shared/views/LoadingText';
-
-  export default {
-    name: 'ChannelSetList',
-    components: { ChannelSetItem, LoadingText },
-    data() {
-      return { loading: true, infoDialog: false };
-    },
-    computed: {
-      ...mapGetters('channelSet', ['channelSets']),
-      headers() {
-        return [
-          { text: this.$tr('title'), sortable: false, value: 'name' },
-          { text: this.$tr('token'), sortable: false, value: 'secret_token', width: '224px' },
-          { text: this.$tr('channelNumber'), sortable: false, align: 'right', width: '50px' },
-          { text: this.$tr('options'), sortable: false, align: 'center', width: '100px' },
-        ];
-      },
-      channelSetsDisclamerStyle() {
-        return { color: this.$themePalette.red.v_500 };
-      },
-      sortedChannelSets() {
-        return sortBy(this.channelSets || [], s => (s.name || '').toLowerCase());
-      },
-    },
-    async mounted() {
-      try {
-        await this.loadChannelSetList();
-      } finally {
-        this.loading = false;
-      }
-    },
-    methods: {
-      ...mapActions('channelSet', ['loadChannelSetList']),
-      newChannelSet() {
-        this.$router.push({ name: RouteNames.NEW_CHANNEL_SET });
-      },
-    },
-    $trs: {
-      cancelButtonLabel: 'Close',
-      noChannelSetsFound:
-        'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
-      addChannelSetTitle: 'New collection',
-      aboutChannelSets: 'About collections',
-      aboutChannelSetsLink: 'Learn more about collections',
-      channelSetsDescriptionText:
-        'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',
-      channelSetsInstructionsText:
-        'You can make a collection by selecting the channels you want to be imported together.',
-      channelSetsDisclaimer:
-        'You will need Kolibri version 0.12.0 or higher to import channel collections',
-      title: 'Collection name',
-      token: 'Token ID',
-      channelNumber: 'Number of channels',
-      options: 'Options',
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .list-items {
-    margin: 0 auto;
-  }
-
-  .link-btn {
-    margin: 0 8px;
-  }
-
-  ::v-deep .v-datatable {
-    background-color: transparent !important;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
deleted file mode 100644
index 59c67b231a..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { render, screen } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
-import VueRouter from 'vue-router';
-import ChannelSetItem from '../ChannelSetItem.vue';
-import { RouteNames } from '../../../constants';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-
-const channelSet = {
-  id: 'testing',
-  name: 'Test Collection',
-  channels: [],
-  secret_token: '1234567890',
-};
-
-const mockActions = {
-  deleteChannelSet: jest.fn(() => Promise.resolve()),
-};
-
-const createMockStore = () => {
-  return new Store({
-    modules: {
-      channelSet: {
-        namespaced: true,
-        state: {
-          channelSetsMap: {
-            [channelSet.id]: channelSet,
-          },
-        },
-        getters: {
-          getChannelSet: state => id => state.channelSetsMap[id],
-        },
-        actions: mockActions,
-      },
-    },
-  });
-};
-
-const renderComponent = () => {
-  const store = createMockStore();
-  const router = new VueRouter({
-    routes: [
-      {
-        name: RouteNames.CHANNEL_SET_DETAILS,
-        path: '/channels/collections/:channelSetId',
-      },
-    ],
-  });
-
-  const result = render(ChannelSetItem, {
-    localVue,
-    store,
-    router,
-    props: {
-      channelSetId: channelSet.id,
-    },
-  });
-
-  return { ...result, router };
-};
-
-describe('channelSetItem', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('clicking the edit option should navigate to channel set details', async () => {
-    const user = userEvent.setup();
-    const { router } = renderComponent();
-
-    const optionsButton = screen.getByRole('button', { name: /options/i });
-    await user.click(optionsButton);
-
-    const editOption = screen.getByText(/edit collection/i);
-    await user.click(editOption);
-
-    expect(router.currentRoute.path).toBe(`/channels/collections/${channelSet.id}`);
-  });
-
-  it('clicking delete button in dialog should delete the channel set', async () => {
-    const user = userEvent.setup();
-    renderComponent();
-
-    const optionsButton = screen.getByRole('button', { name: /options/i });
-    await user.click(optionsButton);
-
-    const deleteOption = screen.getByText(/delete collection/i);
-    await user.click(deleteOption);
-
-    const modalText = /are you sure you want to delete this collection/i;
-    expect(screen.getByText(modalText)).toBeInTheDocument();
-
-    const confirmButton = screen.getByRole('button', { name: /delete collection/i });
-    await user.click(confirmButton);
-
-    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(expect.any(Object), channelSet);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetList.spec.js
deleted file mode 100644
index 61fb53847a..0000000000
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetList.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { factory } from '../../../store';
-import router from '../../../router';
-import { RouteNames } from '../../../constants';
-import ChannelSetList from '../ChannelSetList.vue';
-
-const store = factory();
-
-function makeWrapper() {
-  router.push({
-    name: RouteNames.CHANNEL_SETS,
-  });
-  return mount(ChannelSetList, { store, router });
-}
-
-describe('channelSetList', () => {
-  let wrapper;
-
-  beforeEach(async () => {
-    wrapper = makeWrapper();
-    await wrapper.setData({ loading: false });
-  });
-
-  it('should open a new channel set modal when new set button is clicked', async () => {
-    const push = jest.fn();
-    wrapper.vm.$router.push = push;
-    await wrapper.find('[data-test="add-channelset"]').trigger('click');
-    expect(push).toHaveBeenCalledWith({
-      name: RouteNames.NEW_CHANNEL_SET,
-    });
-  });
-});

From c311b139a01508368daa6815847cdfd0c02ae6d9 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 17:52:38 +0530
Subject: [PATCH 26/45] Text inside the str

---
 .../views/ChannelSet/StudioCollectionsTable.vue            | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 2f26b6d902..008d95165c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -5,12 +5,9 @@
       <div class="header-left">
         <KButton
           appearance="basic-link"
-          class="info-link"
+          :text="$tr('aboutChannelSetsLink')"
           @click="infoDialog = true"
-        >
-          {{ $tr('aboutChannelSetsLink') }}
-        </KButton>
-
+        />
         <KModal
           v-if="infoDialog"
           :title="$tr('aboutChannelSets')"

From 315d921ab775c5d1f9c2272768254518a2c5df50 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 18:01:07 +0530
Subject: [PATCH 27/45] Removed unused classes

---
 .../ChannelSet/StudioCollectionsTable.vue     | 32 ++++---------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 008d95165c..4bf4824783 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -17,10 +17,7 @@
           <div class="info-content">
             <p>{{ $tr('channelSetsDescriptionText') }}</p>
             <p>{{ $tr('channelSetsInstructionsText') }}</p>
-            <p
-              class="disclaimer"
-              :style="{ color: $themeTokens.error }"
-            >
+            <p :style="{ color: $themeTokens.error }">
               {{ $tr('channelSetsDisclaimer') }}
             </p>
           </div>
@@ -39,9 +36,8 @@
       </div>
     </div>
 
-    <div class="table-container">
+    <div>
       <KTable
-        class="collections-table"
         :stickyColumns="stickyColumns"
         caption=""
         :headers="tableHeaders"
@@ -53,45 +49,31 @@
       >
         <template #cell="{ content, colIndex }">
           <!-- Column 0: Collection Name -->
-          <div
-            v-if="colIndex === 0"
-            class="collection-name-cell"
-          >
-            <div class="collection-info">
-              <h3
-                class="collection-title notranslate"
-                dir="auto"
-              >
+          <div v-if="colIndex === 0">
+            <div>
+              <h3 dir="auto">
                 {{ content }}
               </h3>
             </div>
           </div>
 
           <!-- Column 1: Tokens -->
-          <div
-            v-else-if="colIndex === 1"
-            class="tokens-cell"
-          >
+          <div v-else-if="colIndex === 1">
             <StudioCopyToken
               v-if="content"
               :token="content"
-              class="token-item"
               :loading="!content"
             />
             <em
               v-else
               :style="{ color: $themeTokens.annotation }"
-              class="saving-text"
             >
               {{ $tr('saving') }}
             </em>
           </div>
 
           <!-- Column 2: Channel Count -->
-          <div
-            v-else-if="colIndex === 2"
-            class="channel-count"
-          >
+          <div v-else-if="colIndex === 2">
             {{ $formatNumber(content) }}
           </div>
 

From a742ffc8b65a20be3a0e05791ab35835ea9860b0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 18:05:44 +0530
Subject: [PATCH 28/45] removed info-content class ans style

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 4bf4824783..ea04291b8a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -14,7 +14,7 @@
           :cancelText="$tr('cancelButtonLabel')"
           @cancel="infoDialog = false"
         >
-          <div class="info-content">
+          <div>
             <p>{{ $tr('channelSetsDescriptionText') }}</p>
             <p>{{ $tr('channelSetsInstructionsText') }}</p>
             <p :style="{ color: $themeTokens.error }">
@@ -307,10 +307,6 @@
     align-items: center;
   }
 
-  .info-content p {
-    margin-bottom: 16px;
-  }
-
   .actions-cell {
     display: flex;
     justify-content: flex-end;

From 01f1c9090d4dbd85a0d4bdf643e202b14b65e4c0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 18:10:11 +0530
Subject: [PATCH 29/45] Removed unused div

---
 .../ChannelSet/StudioCollectionsTable.vue     | 113 +++++++++---------
 1 file changed, 55 insertions(+), 58 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index ea04291b8a..e6adb2f34b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -29,75 +29,72 @@
           v-if="!loading"
           appearance="raised-button"
           primary
-          data-test="add-channelset"
           :text="$tr('addChannelSetTitle')"
           @click="newChannelSet"
         />
       </div>
     </div>
 
-    <div>
-      <KTable
-        :stickyColumns="stickyColumns"
-        caption=""
-        :headers="tableHeaders"
-        :rows="tableRows"
-        :dataLoading="loading"
-        sortable
-        disableBuiltinSorting
-        :emptyMessage="$tr('noChannelSetsFound')"
-      >
-        <template #cell="{ content, colIndex }">
-          <!-- Column 0: Collection Name -->
-          <div v-if="colIndex === 0">
-            <div>
-              <h3 dir="auto">
-                {{ content }}
-              </h3>
-            </div>
+    <KTable
+      :stickyColumns="stickyColumns"
+      caption=""
+      :headers="tableHeaders"
+      :rows="tableRows"
+      :dataLoading="loading"
+      sortable
+      disableBuiltinSorting
+      :emptyMessage="$tr('noChannelSetsFound')"
+    >
+      <template #cell="{ content, colIndex }">
+        <!-- Column 0: Collection Name -->
+        <div v-if="colIndex === 0">
+          <div>
+            <h3 dir="auto">
+              {{ content }}
+            </h3>
           </div>
+        </div>
 
-          <!-- Column 1: Tokens -->
-          <div v-else-if="colIndex === 1">
-            <StudioCopyToken
-              v-if="content"
-              :token="content"
-              :loading="!content"
-            />
-            <em
-              v-else
-              :style="{ color: $themeTokens.annotation }"
-            >
-              {{ $tr('saving') }}
-            </em>
-          </div>
+        <!-- Column 1: Tokens -->
+        <div v-else-if="colIndex === 1">
+          <StudioCopyToken
+            v-if="content"
+            :token="content"
+            :loading="!content"
+          />
+          <em
+            v-else
+            :style="{ color: $themeTokens.annotation }"
+          >
+            {{ $tr('saving') }}
+          </em>
+        </div>
 
-          <!-- Column 2: Channel Count -->
-          <div v-else-if="colIndex === 2">
-            {{ $formatNumber(content) }}
-          </div>
+        <!-- Column 2: Channel Count -->
+        <div v-else-if="colIndex === 2">
+          {{ $formatNumber(content) }}
+        </div>
 
-          <!-- Column 3: Actions -->
-          <div
-            v-else-if="colIndex === 3"
-            class="actions-cell"
+        <!-- Column 3: Actions -->
+        <div
+          v-else-if="colIndex === 3"
+          class="actions-cell"
+        >
+          <KIconButton
+            icon="optionsVertical"
+            :aria-label="$tr('options')"
           >
-            <KIconButton
-              icon="optionsVertical"
-              :aria-label="$tr('options')"
-            >
-              <template #menu>
-                <KDropdownMenu
-                  :options="dropdownOptions"
-                  :hasIcons="true"
-                  @select="option => handleOptionSelect(option, content)"
-                />
-              </template>
-            </KIconButton>
-          </div>
-        </template>
-      </KTable>
-    </div>
+            <template #menu>
+              <KDropdownMenu
+                :options="dropdownOptions"
+                :hasIcons="true"
+                @select="option => handleOptionSelect(option, content)"
+              />
+            </template>
+          </KIconButton>
+        </div>
+      </template>
+    </KTable>
 
     <!-- Delete Confirmation Modal -->
     <KModal

From 210d035af8c714a35809a62a1910ef7f5e18d912 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 24 Nov 2025 18:29:17 +0530
Subject: [PATCH 30/45] Updated sorting

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index e6adb2f34b..73ac2a87e9 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -42,7 +42,7 @@
       :rows="tableRows"
       :dataLoading="loading"
       sortable
-      disableBuiltinSorting
+      :defaultSort="{ columnId: 'name', direction: 'asc' }"
       :emptyMessage="$tr('noChannelSetsFound')"
     >
       <template #cell="{ content, colIndex }">

From ddc2acb9baf72695b4addd6eab7c3b3156a7a4e0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 16:32:29 +0530
Subject: [PATCH 31/45] added usekshow

---
 .../ChannelSet/StudioCollectionsTable.vue     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 73ac2a87e9..1add040686 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -35,15 +35,25 @@
       </div>
     </div>
 
+    <div v-if="show('table-loader', loading, 500)">
+      <KCircularLoader />
+    </div>
+
+    <div
+      v-else-if="tableRows.length === 0"
+      class="empty-state"
+    >
+      <p>{{ $tr('noChannelSetsFound') }}</p>
+    </div>
+
     <KTable
+      v-else
       :stickyColumns="stickyColumns"
       caption=""
       :headers="tableHeaders"
       :rows="tableRows"
-      :dataLoading="loading"
       sortable
       :defaultSort="{ columnId: 'name', direction: 'asc' }"
-      :emptyMessage="$tr('noChannelSetsFound')"
     >
       <template #cell="{ content, colIndex }">
         <!-- Column 0: Collection Name -->
@@ -115,6 +125,7 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import { RouteNames } from '../../constants';
   import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
 
@@ -123,6 +134,10 @@
     components: {
       StudioCopyToken,
     },
+    setup() {
+      const { show } = useKShow();
+      return { show };
+    },
     data() {
       return {
         loading: true,

From cbbdd14867908b57bfec521ea21728d6d216eec4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 16:40:05 +0530
Subject: [PATCH 32/45] draft

---
 .../views/ChannelSet/StudioCollectionsTable.vue            | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 1add040686..2bdc13c9f6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <div v-if="show('table-loader', loading, 500)">
+    <div v-if="show('loader', loading, 500)">
       <KCircularLoader />
     </div>
 
@@ -44,6 +44,11 @@
       class="empty-state"
     >
       <p>{{ $tr('noChannelSetsFound') }}</p>
+      <KButton
+        appearance="basic-link"
+        :text="$tr('aboutChannelSetsLink')"
+        @click="infoDialog = true"
+      />
     </div>
 
     <KTable

From 5531d66ddfbae3475c3af663bc30400f8a8f2f68 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 16:50:12 +0530
Subject: [PATCH 33/45] Implemented the new pr style for learnabout collection
 link button

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 2bdc13c9f6..417e3716aa 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -4,6 +4,7 @@
     <div class="table-header">
       <div class="header-left">
         <KButton
+          v-if="tableRows.length > 0"
           appearance="basic-link"
           :text="$tr('aboutChannelSetsLink')"
           @click="infoDialog = true"
@@ -270,7 +271,7 @@
       },
     },
     $trs: {
-      aboutChannelSetsLink: 'Learn about collections',
+      aboutChannelSetsLink: 'Learn more about collections',
       aboutChannelSets: 'About collections',
       channelSetsDescriptionText:
         'A collection contains multiple Kolibri Studio channels that can be imported at one time to Kolibri with a single collection token.',

From 34cba6dc4da7cda049bdb81c2f18b4cdd903f5a5 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 16:54:19 +0530
Subject: [PATCH 34/45] Added mb-0

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 417e3716aa..fe3134b017 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -44,7 +44,7 @@
       v-else-if="tableRows.length === 0"
       class="empty-state"
     >
-      <p>{{ $tr('noChannelSetsFound') }}</p>
+      <p class="mb-0">{{ $tr('noChannelSetsFound') }}</p>
       <KButton
         appearance="basic-link"
         :text="$tr('aboutChannelSetsLink')"

From b60a5e4b5c53b3c96db670a0be58c1c64a135dc7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 17:19:53 +0530
Subject: [PATCH 35/45] removed content loading

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index fe3134b017..994c91e78d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -76,7 +76,6 @@
           <StudioCopyToken
             v-if="content"
             :token="content"
-            :loading="!content"
           />
           <em
             v-else

From dd34e08b0e247d4e414ac93d5a335542b8834cef Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 17:34:10 +0530
Subject: [PATCH 36/45] Added kresponsive window

---
 .../ChannelSet/StudioCollectionsTable.vue     | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 994c91e78d..9bc846b601 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -1,7 +1,10 @@
 <template>
 
   <KPageContainer class="page-container">
-    <div class="table-header">
+    <div
+      class="table-header"
+      :class="{ 'table-header-mobile': isSmall() }"
+    >
       <div class="header-left">
         <KButton
           v-if="tableRows.length > 0"
@@ -131,6 +134,7 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../constants';
   import StudioCopyToken from '../../../settings/pages/Account/StudioCopyToken';
 
@@ -141,7 +145,12 @@
     },
     setup() {
       const { show } = useKShow();
-      return { show };
+      const { windowBreakpoint } = useKResponsiveWindow();
+
+      return {
+        show,
+        windowBreakpoint,
+      };
     },
     data() {
       return {
@@ -231,6 +240,10 @@
     methods: {
       ...mapActions('channelSet', ['loadChannelSetList', 'deleteChannelSet']),
 
+      isSmall() {
+        return this.windowBreakpoint <= 0;
+      },
+
       handleOptionSelect(option, collectionId) {
         if (option.value === 'edit') {
           this.$router.push({
@@ -328,10 +341,9 @@
     display: flex;
     justify-content: flex-end;
   }
-  @media (max-width: 500px) {
-    .table-header {
-      justify-content: center;
-    }
+
+  .table-header-mobile {
+    justify-content: center;
   }
 
 </style>

From fc5ae1f4642535427fdeb1191bf49f6c3e8e7d56 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 18:04:28 +0530
Subject: [PATCH 37/45] Updated test

---
 .../__tests__/StudioCollectionsTable.spec.js  | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
index 90cd753ab2..d17629b2d6 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/StudioCollectionsTable.spec.js
@@ -2,7 +2,6 @@ import { render, screen, within, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
-import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import StudioCollectionsTable from '../StudioCollectionsTable.vue';
 import { RouteNames } from '../../../constants';
@@ -84,7 +83,9 @@ const renderComponent = async (options = {}) => {
     expect(mockActions.loadChannelSetList).toHaveBeenCalled();
   });
 
-  await nextTick();
+  await waitFor(() => {
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+  });
 
   return { ...result, router };
 };
@@ -97,10 +98,20 @@ describe('StudioCollectionsTable', () => {
   it('should display channel sets in table when data is loaded', async () => {
     await renderComponent();
 
-    expect(screen.getByText('Test Collection 1')).toBeInTheDocument();
-    expect(screen.getByText('Test Collection 2')).toBeInTheDocument();
-    expect(screen.getByText('2')).toBeInTheDocument();
-    expect(screen.getByText('1')).toBeInTheDocument();
+    const table = screen.getByRole('grid');
+    const rows = within(table).getAllByRole('row').slice(1);
+
+    expect(rows).toHaveLength(2);
+
+    const row1Cells = within(rows[0]).getAllByRole('gridcell');
+    expect(row1Cells[0]).toHaveTextContent('Test Collection 1');
+    expect(row1Cells[1]).toHaveTextContent('Token');
+    expect(row1Cells[2]).toHaveTextContent('2');
+
+    const row2Cells = within(rows[1]).getAllByRole('gridcell');
+    expect(row2Cells[0]).toHaveTextContent('Test Collection 2');
+    expect(row2Cells[1]).toHaveTextContent('Saving');
+    expect(row2Cells[2]).toHaveTextContent('1');
   });
 
   it('should display empty message when no collections are present', async () => {
@@ -125,13 +136,14 @@ describe('StudioCollectionsTable', () => {
         'You can package together multiple channels to create a collection. The entire collection can then be imported to Kolibri at once by using a collection token.',
       ),
     ).toBeInTheDocument();
+    expect(screen.getByText('Learn more about collections')).toBeInTheDocument();
   });
 
   it('should open info modal when "Learn about collections" link is clicked', async () => {
     const user = userEvent.setup();
     await renderComponent();
 
-    const infoLink = screen.getByText('Learn about collections');
+    const infoLink = screen.getByText('Learn more about collections');
     await user.click(infoLink);
 
     expect(screen.getByRole('heading', { name: 'About collections' })).toBeInTheDocument();
@@ -158,6 +170,10 @@ describe('StudioCollectionsTable', () => {
     const user = userEvent.setup();
     const { router } = await renderComponent();
 
+    await waitFor(() => {
+      expect(screen.getByText('Test Collection 1')).toBeInTheDocument();
+    });
+
     const optionsButtons = screen.getAllByRole('button', { name: /options/i });
     await user.click(optionsButtons[0]);
 
@@ -172,6 +188,10 @@ describe('StudioCollectionsTable', () => {
     const user = userEvent.setup();
     await renderComponent();
 
+    await waitFor(() => {
+      expect(screen.getByText('Test Collection 1')).toBeInTheDocument();
+    });
+
     const optionsButtons = screen.getAllByRole('button', { name: /options/i });
     await user.click(optionsButtons[0]);
 

From ba60e7d1c44a75bfe7c546ea6666052920cb4fe4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 19:07:14 +0530
Subject: [PATCH 38/45] Added title and top margins

---
 .../ChannelSet/StudioCollectionsTable.vue     | 88 ++++++++++++-------
 1 file changed, 57 insertions(+), 31 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 9bc846b601..55478048b5 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -4,31 +4,12 @@
     <div
       class="table-header"
       :class="{ 'table-header-mobile': isSmall() }"
+      :style="{
+        marginTop: windowIsSmall ? '8px' : '16px',
+      }"
     >
-      <div class="header-left">
-        <KButton
-          v-if="tableRows.length > 0"
-          appearance="basic-link"
-          :text="$tr('aboutChannelSetsLink')"
-          @click="infoDialog = true"
-        />
-        <KModal
-          v-if="infoDialog"
-          :title="$tr('aboutChannelSets')"
-          :cancelText="$tr('cancelButtonLabel')"
-          @cancel="infoDialog = false"
-        >
-          <div>
-            <p>{{ $tr('channelSetsDescriptionText') }}</p>
-            <p>{{ $tr('channelSetsInstructionsText') }}</p>
-            <p :style="{ color: $themeTokens.error }">
-              {{ $tr('channelSetsDisclaimer') }}
-            </p>
-          </div>
-        </KModal>
-      </div>
-
-      <div class="header-right">
+      <div class="header-top">
+        <h1 class="page-title">{{ $tr('pageTitle') }}</h1>
         <KButton
           v-if="!loading"
           appearance="raised-button"
@@ -37,6 +18,31 @@
           @click="newChannelSet"
         />
       </div>
+
+      <div class="header-bottom">
+        <div class="header-left">
+          <KButton
+            v-if="tableRows.length > 0"
+            appearance="basic-link"
+            :text="$tr('aboutChannelSetsLink')"
+            @click="infoDialog = true"
+          />
+          <KModal
+            v-if="infoDialog"
+            :title="$tr('aboutChannelSets')"
+            :cancelText="$tr('cancelButtonLabel')"
+            @cancel="infoDialog = false"
+          >
+            <div>
+              <p>{{ $tr('channelSetsDescriptionText') }}</p>
+              <p>{{ $tr('channelSetsInstructionsText') }}</p>
+              <p :style="{ color: $themeTokens.error }">
+                {{ $tr('channelSetsDisclaimer') }}
+              </p>
+            </div>
+          </KModal>
+        </div>
+      </div>
     </div>
 
     <div v-if="show('loader', loading, 500)">
@@ -145,11 +151,12 @@
     },
     setup() {
       const { show } = useKShow();
-      const { windowBreakpoint } = useKResponsiveWindow();
+      const { windowBreakpoint, windowIsSmall } = useKResponsiveWindow();
 
       return {
         show,
         windowBreakpoint,
+        windowIsSmall,
       };
     },
     data() {
@@ -283,6 +290,7 @@
       },
     },
     $trs: {
+      pageTitle: 'Collections',
       aboutChannelSetsLink: 'Learn more about collections',
       aboutChannelSets: 'About collections',
       channelSetsDescriptionText:
@@ -323,27 +331,45 @@
   }
 
   .table-header {
+    margin-bottom: 24px;
+  }
+
+  .header-top {
     display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
   }
 
-  .header-left,
-  .header-right {
+  .header-bottom {
     display: flex;
     align-items: center;
   }
 
+  .header-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .page-title {
+    margin: 0;
+  }
+
   .actions-cell {
     display: flex;
     justify-content: flex-end;
   }
 
   .table-header-mobile {
-    justify-content: center;
+    .header-top {
+      flex-direction: column;
+      gap: 12px;
+      text-align: center;
+    }
+
+    .header-bottom {
+      justify-content: center;
+    }
   }
 
 </style>

From f17873d5324b2ecb185d0529fd7317d9a27ed3c4 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 26 Nov 2025 19:24:32 +0530
Subject: [PATCH 39/45] updated styles

---
 .../views/ChannelSet/StudioCollectionsTable.vue      | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 55478048b5..e83734fa7d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -74,7 +74,10 @@
         <!-- Column 0: Collection Name -->
         <div v-if="colIndex === 0">
           <div>
-            <h3 dir="auto">
+            <h3
+              dir="auto"
+              class="collection-name"
+            >
               {{ content }}
             </h3>
           </div>
@@ -341,6 +344,13 @@
     margin-bottom: 16px;
   }
 
+  .collection-name {
+    display: inline-block;
+    font-size: 12px;
+    white-space: nowrap;
+    border-radius: 2px;
+  }
+
   .header-bottom {
     display: flex;
     align-items: center;

From e1403d1412efc1574f0961e5bb9f061ef8e50c6c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 00:11:56 +0530
Subject: [PATCH 40/45] Added margintop between page container and buttons

---
 .../ChannelSet/StudioCollectionsTable.vue     | 58 ++++++++-----------
 1 file changed, 23 insertions(+), 35 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index e83734fa7d..07fe5abcbe 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -2,10 +2,9 @@
 
   <KPageContainer class="page-container">
     <div
-      class="table-header"
       :class="{ 'table-header-mobile': isSmall() }"
       :style="{
-        marginTop: windowIsSmall ? '8px' : '16px',
+        marginTop: windowIsSmall ? '24px' : '32px',
       }"
     >
       <div class="header-top">
@@ -20,28 +19,26 @@
       </div>
 
       <div class="header-bottom">
-        <div class="header-left">
-          <KButton
-            v-if="tableRows.length > 0"
-            appearance="basic-link"
-            :text="$tr('aboutChannelSetsLink')"
-            @click="infoDialog = true"
-          />
-          <KModal
-            v-if="infoDialog"
-            :title="$tr('aboutChannelSets')"
-            :cancelText="$tr('cancelButtonLabel')"
-            @cancel="infoDialog = false"
-          >
-            <div>
-              <p>{{ $tr('channelSetsDescriptionText') }}</p>
-              <p>{{ $tr('channelSetsInstructionsText') }}</p>
-              <p :style="{ color: $themeTokens.error }">
-                {{ $tr('channelSetsDisclaimer') }}
-              </p>
-            </div>
-          </KModal>
-        </div>
+        <KButton
+          v-if="tableRows.length > 0"
+          appearance="basic-link"
+          :text="$tr('aboutChannelSetsLink')"
+          @click="infoDialog = true"
+        />
+        <KModal
+          v-if="infoDialog"
+          :title="$tr('aboutChannelSets')"
+          :cancelText="$tr('cancelButtonLabel')"
+          @cancel="infoDialog = false"
+        >
+          <div>
+            <p>{{ $tr('channelSetsDescriptionText') }}</p>
+            <p>{{ $tr('channelSetsInstructionsText') }}</p>
+            <p :style="{ color: $themeTokens.error }">
+              {{ $tr('channelSetsDisclaimer') }}
+            </p>
+          </div>
+        </KModal>
       </div>
     </div>
 
@@ -333,10 +330,6 @@
     text-align: center;
   }
 
-  .table-header {
-    margin-bottom: 24px;
-  }
-
   .header-top {
     display: flex;
     align-items: center;
@@ -346,19 +339,14 @@
 
   .collection-name {
     display: inline-block;
-    font-size: 12px;
-    white-space: nowrap;
+    font-size: 100%;
     border-radius: 2px;
   }
 
   .header-bottom {
     display: flex;
     align-items: center;
-  }
-
-  .header-left {
-    display: flex;
-    align-items: center;
+    margin-bottom: 8px;
   }
 
   .page-title {

From f2d53a0ddc9efa902e6d544f8236557fcb48c6af Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 00:15:28 +0530
Subject: [PATCH 41/45] Added correct font-weight

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

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 07fe5abcbe..c6f3a67159 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -340,6 +340,7 @@
   .collection-name {
     display: inline-block;
     font-size: 100%;
+    font-weight: 500;
     border-radius: 2px;
   }
 

From cdaa1781972366926a853483dbefcc06229460df Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 00:47:12 +0530
Subject: [PATCH 42/45] added captions

---
 .../channelList/views/ChannelSet/StudioCollectionsTable.vue  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index c6f3a67159..70aa5401a4 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -61,7 +61,7 @@
     <KTable
       v-else
       :stickyColumns="stickyColumns"
-      caption=""
+      :caption="$tr('tableCaption')"
       :headers="tableHeaders"
       :rows="tableRows"
       sortable
@@ -291,6 +291,7 @@
     },
     $trs: {
       pageTitle: 'Collections',
+      tableCaption: 'List of collections',
       aboutChannelSetsLink: 'Learn more about collections',
       aboutChannelSets: 'About collections',
       channelSetsDescriptionText:
@@ -339,7 +340,7 @@
 
   .collection-name {
     display: inline-block;
-    font-size: 100%;
+    font-size: 16px;
     font-weight: 500;
     border-radius: 2px;
   }

From 31ce713f212dd3020a44f7377b9c83faa1687d38 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 01:05:36 +0530
Subject: [PATCH 43/45] Added options button

---
 .../ChannelSet/StudioCollectionsTable.vue     | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 70aa5401a4..4f6b11b0cd 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -2,7 +2,7 @@
 
   <KPageContainer class="page-container">
     <div
-      :class="{ 'table-header-mobile': isSmall() }"
+      :class="{ 'table-header-mobile': isMobile() }"
       :style="{
         marginTop: windowIsSmall ? '24px' : '32px',
       }"
@@ -104,7 +104,23 @@
           v-else-if="colIndex === 3"
           class="actions-cell"
         >
+          <KButton
+            v-if="!isSmallScreen()"
+            :text="$tr('options')"
+            appearance="flat-button"
+            :hasDropdown="true"
+          >
+            <template #menu>
+              <KDropdownMenu
+                :options="dropdownOptions"
+                :hasIcons="true"
+                @select="option => handleOptionSelect(option, content)"
+              />
+            </template>
+          </KButton>
+
           <KIconButton
+            v-else
             icon="optionsVertical"
             :aria-label="$tr('options')"
           >
@@ -247,10 +263,14 @@
     methods: {
       ...mapActions('channelSet', ['loadChannelSetList', 'deleteChannelSet']),
 
-      isSmall() {
+      isMobile() {
         return this.windowBreakpoint <= 0;
       },
 
+      isSmallScreen() {
+        return this.windowBreakpoint <= 1;
+      },
+
       handleOptionSelect(option, collectionId) {
         if (option.value === 'edit') {
           this.$router.push({

From 47921026921ecbdcd8f9a2cc95be1dace4449761 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 12:23:57 +0530
Subject: [PATCH 44/45] added -ve margin to hid the uifeedback input wrapper

---
 .../views/ChannelSet/StudioCollectionsTable.vue          | 2 +-
 .../frontend/settings/pages/Account/StudioCopyToken.vue  | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 4f6b11b0cd..928ece71d1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -268,7 +268,7 @@
       },
 
       isSmallScreen() {
-        return this.windowBreakpoint <= 1;
+        return this.windowBreakpoint <= 2;
       },
 
       handleOptionSelect(option, collectionId) {
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Account/StudioCopyToken.vue b/contentcuration/contentcuration/frontend/settings/pages/Account/StudioCopyToken.vue
index cce976d069..ab6607d312 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Account/StudioCopyToken.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Account/StudioCopyToken.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div :class="{ 'token-input-wrapper-small': isSmall() }">
+  <div
+    :class="{ 'token-input-wrapper-small': isSmall() }"
+    class="token-wrapper"
+  >
     <div
       v-if="show('loader', loading, 500)"
       class="loader"
@@ -125,4 +128,8 @@
     margin-right: 0.5rem;
   }
 
+  .token-wrapper {
+    margin-bottom: -32px;
+  }
+
 </style>

From 26fc94450c13f2ed2b9714fe59c5c82973009771 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Thu, 27 Nov 2025 13:15:46 +0530
Subject: [PATCH 45/45] Added overfloe hidden

---
 .../views/ChannelSet/StudioCollectionsTable.vue        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
index 928ece71d1..4a0d431472 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/StudioCollectionsTable.vue
@@ -46,10 +46,7 @@
       <KCircularLoader />
     </div>
 
-    <div
-      v-else-if="tableRows.length === 0"
-      class="empty-state"
-    >
+    <div v-else-if="tableRows.length === 0">
       <p class="mb-0">{{ $tr('noChannelSetsFound') }}</p>
       <KButton
         appearance="basic-link"
@@ -348,7 +345,6 @@
     width: 100%;
     max-width: 1440px;
     margin: 0 auto;
-    text-align: center;
   }
 
   .header-top {
@@ -392,4 +388,8 @@
     }
   }
 
+  .page-container .k-table-wrapper {
+    overflow: hidden;
+  }
+
 </style>