From 98a8e6128ffe978afe7860acdeae3596f1dabff0 Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Mon, 17 Nov 2025 11:14:50 +0530
Subject: [PATCH 1/3] Cards in Starred channels changes

---
 .../channelList/composables/useChannelList.js | 131 +++++
 .../frontend/channelList/router.js            |   4 +-
 .../views/Channel/StudioMyChannels.vue        | 496 +-----------------
 .../views/Channel/StudioStarredChannels.vue   |  76 +++
 .../__tests__/StudioStarredChannels.spec.js   | 170 ++++++
 .../Channel/components/StudioChannelCard.vue  | 431 +++++++++++++++
 .../views/Channel/styles/StudioChannels.scss  | 107 ++++
 7 files changed, 937 insertions(+), 478 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss

diff --git a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
new file mode 100644
index 0000000000..54e8991ecb
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
@@ -0,0 +1,131 @@
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import { useRouter, useRoute } from 'vue-router/composables';
+import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+import orderBy from 'lodash/orderBy';
+import { RouteNames } from '../constants';
+
+/**
+ * Composable for channel list functionality
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.listType - Type of channel list (from ChannelListTypes)
+ * @param {Array<string>} options.sortFields - Fields to sort by (default: ['modified'])
+ * @param {Array<string>} options.orderFields - Sort order (default: ['desc'])
+ * @param {Function} options.filterFn - Additional filter function for channels
+ * @returns {Object} Channel list state and methods
+ */
+export function useChannelList(options = {}) {
+  const { listType, sortFields = ['modified'], orderFields = ['desc'], filterFn = null } = options;
+
+  const instance = getCurrentInstance();
+  const store = instance.proxy.$store;
+
+  const router = useRouter();
+  const route = useRoute();
+
+  const { windowIsMedium, windowIsLarge, windowBreakpoint } = useKResponsiveWindow();
+
+  const loading = ref(false);
+
+  const channels = computed(() => store.getters['channel/channels'] || []);
+
+  const listChannels = computed(() => {
+    if (!channels.value || channels.value.length === 0) {
+      return [];
+    }
+
+    let filtered = channels.value.filter(channel => channel[listType] && !channel.deleted);
+
+    if (filterFn && typeof filterFn === 'function') {
+      filtered = filtered.filter(filterFn);
+    }
+
+    return orderBy(filtered, sortFields, orderFields);
+  });
+
+  const hasChannels = computed(() => listChannels.value.length > 0);
+
+  const maxWidthStyle = computed(() => {
+    if (windowBreakpoint.value >= 5) return '50%';
+    if (windowBreakpoint.value === 4) return '66.66%';
+    if (windowBreakpoint.value === 3) return '83.33%';
+
+    if (windowIsLarge.value) return '50%';
+    if (windowIsMedium.value) return '83.33%';
+
+    return '100%';
+  });
+
+  // Methods
+  const loadData = async () => {
+    loading.value = true;
+    try {
+      await store.dispatch('channel/loadChannelList', { listType });
+    } catch (error) {
+      loading.value = false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const newChannel = () => {
+    if (window.$analytics) {
+      window.$analytics.trackClick('channel_list', 'Create channel');
+    }
+
+    router.push({
+      name: RouteNames.NEW_CHANNEL,
+      query: { last: route.name },
+    });
+  };
+
+  const goToChannel = channelId => {
+    window.location.href = window.Urls.channel(channelId);
+  };
+
+  const channelDetailsLink = channel => {
+    return {
+      name: RouteNames.CHANNEL_DETAILS,
+      query: {
+        ...route.query,
+        last: route.name,
+      },
+      params: {
+        channelId: channel.id,
+      },
+    };
+  };
+
+  const channelEditLink = channel => {
+    return {
+      name: RouteNames.CHANNEL_EDIT,
+      query: {
+        ...route.query,
+        last: route.name,
+      },
+      params: {
+        channelId: channel.id,
+        tab: 'edit',
+      },
+    };
+  };
+
+  onMounted(() => {
+    loadData();
+  });
+
+  return {
+    loading,
+    channels,
+    listChannels,
+    hasChannels,
+
+    maxWidthStyle,
+
+    loadData,
+    newChannel,
+    goToChannel,
+    channelDetailsLink,
+    channelEditLink,
+  };
+}
diff --git a/contentcuration/contentcuration/frontend/channelList/router.js b/contentcuration/contentcuration/frontend/channelList/router.js
index f9624f157e..02a6703fd5 100644
--- a/contentcuration/contentcuration/frontend/channelList/router.js
+++ b/contentcuration/contentcuration/frontend/channelList/router.js
@@ -1,6 +1,7 @@
 import VueRouter from 'vue-router';
 import ChannelList from './views/Channel/ChannelList';
 import StudioMyChannels from './views/Channel/StudioMyChannels.vue';
+import StudioStarredChannels from './views/Channel/StudioStarredChannels.vue';
 import ChannelSetList from './views/ChannelSet/ChannelSetList';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
@@ -37,8 +38,7 @@ const router = new VueRouter({
     {
       name: RouteNames.CHANNELS_STARRED,
       path: '/starred',
-      component: ChannelList,
-      props: { listType: ChannelListTypes.STARRED },
+      component: StudioStarredChannels,
     },
     {
       name: RouteNames.CHANNELS_VIEW_ONLY,
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
index 4126d7de18..f4288f0e48 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioMyChannels.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="my-channels">
+  <div class="studio-channels">
     <div
       class="new-channel"
       :style="{ maxWidth: maxWidthStyle }"
@@ -35,142 +35,14 @@
         ]"
         class="cards"
       >
-        <KCard
+        <StudioChannelCard
           v-for="(channel, index) in listChannels"
           :key="channel.id"
-          :headingLevel="2"
-          thumbnailDisplay="small"
-          :thumbnailSrc="thumbnailSrc(channel)"
-          :thumbnailAlign="'left'"
-          :thumbnailScaleType="'contain'"
-          :orientation="windowIsSmall ? 'vertical' : 'horizontal'"
-          :title="channel.name"
-          :titleMaxLines="2"
-          :data-testid="`card-${index}`"
-          @click="goToChannelRoute(channel)"
-        >
-          <template #thumbnailPlaceholder>
-            <KIcon
-              :color="$themePalette.grey.v_400"
-              class="img-placeholder-icon"
-              icon="image"
-            />
-          </template>
-          <template #belowTitle>
-            <div class="cards-below-title">
-              <div class="cards-resource">
-                <span> {{ $tr('resourceCount', { count: channel.count || 0 }) }} </span>
-                <span>
-                  {{ language(channel) }}
-                </span>
-              </div>
-              <div
-                class="cards-desc"
-                :style="{ color: $themePalette.text }"
-              >
-                {{ channel.description }}
-              </div>
-            </div>
-          </template>
-          <template #footer>
-            <div class="footer">
-              <div class="footer-left">
-                <span :style="{ color: $themeTokens.annotation }">
-                  {{ getPublishStatus(channel) }}
-                </span>
-                <div>
-                  <KTooltip
-                    :reference="`lastUpdatedTime-${index}`"
-                    placement="bottom"
-                    :refs="$refs"
-                  >
-                    {{
-                      $tr('lastUpdated', {
-                        updated: $formatRelative(channel.modified, { now: new Date() }),
-                      })
-                    }}
-                  </KTooltip>
-                  <div
-                    v-if="hasUnpublishedChanges(channel)"
-                    class="last-updated"
-                  >
-                    <KIcon
-                      :ref="`lastUpdatedTime-${index}`"
-                      :color="$themePalette.green.v_600"
-                      icon="dot"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div class="footer-right">
-                <div
-                  :ref="`detailIcon${index}`"
-                  class="details-link"
-                >
-                  <router-link
-                    :data-testid="`details-button-${index}`"
-                    :to="channelDetailsLink(channel)"
-                    @click.native.stop
-                  >
-                    <KIcon
-                      class="details-icon"
-                      :color="$themeTokens.primary"
-                      icon="info"
-                    />
-                  </router-link>
-                  <KTooltip
-                    :reference="`detailIcon${index}`"
-                    :refs="$refs"
-                    maxWidth="200px"
-                  >
-                    {{ $tr('details') }}
-                  </KTooltip>
-                </div>
-
-                <ChannelStar
-                  :channelId="channel.id"
-                  :data-testid="`bookmark-button-${index}`"
-                  :bookmark="channel.bookmark"
-                />
-                <KIconButton
-                  size="small"
-                  icon="optionsVertical"
-                  appearance="flat-button"
-                  :data-testid="`dropdown-button-${index}`"
-                  @click.stop="openDropDown(channel, index)"
-                >
-                  <template #menu>
-                    <KDropdownMenu
-                      :hasIcons="true"
-                      :options="dropDownArr"
-                      @select="option => selectedItem(option, channel)"
-                    />
-                  </template>
-                </KIconButton>
-              </div>
-            </div>
-          </template>
-        </KCard>
+          :channel="channel"
+          :index="index"
+        />
       </KCardGrid>
     </div>
-    <KModal
-      v-if="deleteDialog"
-      :title="canEdit ? $tr('deleteTitle') : $tr('removeTitle')"
-      :submitText="canEdit ? $tr('deleteChannel') : $tr('removeBtn')"
-      :cancelText="$tr('cancel')"
-      data-testid="delete-modal"
-      @submit="handleDelete"
-      @cancel="deleteDialog = false"
-    >
-      {{ canEdit ? $tr('deletePrompt') : $tr('removePrompt') }}
-    </KModal>
-    <ChannelTokenModal
-      v-if="selectedChannel && selectedChannel.published"
-      v-model="tokenDialog"
-      data-testid="copy-modal"
-      :channel="selectedChannel"
-      @copied="trackTokenCopy"
-    />
   </div>
 
 </template>
@@ -178,259 +50,33 @@
 
 <script>
 
-  import { mapGetters, mapActions } from 'vuex';
-  import orderBy from 'lodash/orderBy';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import { RouteNames } from '../../constants';
-  import ChannelStar from './ChannelStar';
+  import { useChannelList } from '../../composables/useChannelList';
+  import StudioChannelCard from './components/StudioChannelCard';
   import { ChannelListTypes } from 'shared/constants';
-  import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
-  import Languages from 'shared/leUtils/Languages';
 
   export default {
     name: 'StudioMyChannels',
     components: {
-      ChannelStar,
-      ChannelTokenModal,
+      StudioChannelCard,
     },
     setup() {
-      const { windowIsSmall, windowIsMedium, windowIsLarge, windowBreakpoint } =
-        useKResponsiveWindow();
-      return {
-        windowIsSmall,
-        windowIsMedium,
-        windowIsLarge,
-        windowBreakpoint,
-      };
-    },
-    data() {
+      // Use the channel list composable
+      const { loading, listChannels, newChannel, maxWidthStyle } = useChannelList({
+        listType: ChannelListTypes.EDITABLE,
+        sortFields: ['modified'],
+        orderFields: ['desc'],
+      });
+
       return {
-        loading: false,
-        tokenDialog: false,
-        deleteDialog: false,
-        selectedChannel: {
-          published: false,
-        },
-        dropDownArr: [],
+        loading,
+        listChannels,
+        newChannel,
+        maxWidthStyle,
       };
     },
-    computed: {
-      ...mapGetters('channel', ['channels']),
-      listChannels() {
-        const channels = this.channels;
-        if (!channels) {
-          return [];
-        }
-        const sortFields = ['modified'];
-        const orderFields = ['desc'];
-        const data = orderBy(
-          this.channels.filter(channel => channel[ChannelListTypes.EDITABLE] && !channel.deleted),
-          sortFields,
-          orderFields,
-        );
-        return data;
-      },
-
-      // channel items properties
-      canEdit() {
-        return this.selectedChannel.edit;
-      },
-
-      maxWidthStyle() {
-        if (this.windowBreakpoint >= 5) return '50%';
-        if (this.windowBreakpoint === 4) return '66.66%';
-        if (this.windowBreakpoint === 3) return '83.33%';
-
-        if (this.windowIsLarge) return '50%';
-        if (this.windowIsMedium) return '83.33%';
-
-        return '100%';
-      },
-    },
-    created() {
-      this.loadData();
-    },
-    methods: {
-      ...mapActions('channel', ['loadChannelList', 'deleteChannel', 'removeViewer']),
-      language(channel) {
-        const lang = Languages.get(channel.language);
-        if (lang) {
-          return lang.native_name;
-        }
-        return this.$tr('channelLanguageNotSetIndicator');
-      },
-      newChannel() {
-        this.$analytics.trackClick('channel_list', 'Create channel');
-        this.$router.push({
-          name: RouteNames.NEW_CHANNEL,
-          query: { last: this.$route.name },
-        });
-      },
-      goToChannelRoute(channel) {
-        window.location.href = window.Urls.channel(channel.id);
-      },
-      loadData() {
-        this.loading = true;
-        this.loadChannelList({ listType: ChannelListTypes.EDITABLE })
-          .then(() => {
-            this.loading = false;
-          })
-          .catch(() => {
-            this.loading = false;
-          });
-      },
-
-      hasUnpublishedChanges(channel) {
-        return !channel.last_published || channel.modified > channel.last_published;
-      },
-      trackTokenCopy() {
-        this.$analytics.trackAction('channel_list', 'Copy token', {
-          eventLabel: this.selectedChannel.primary_token,
-        });
-      },
-      channelDetailsLink(channel) {
-        return {
-          name: RouteNames.CHANNEL_DETAILS,
-          query: {
-            // this component is used on the catalog search
-            // page => do not lose search query
-            ...this.$route.query,
-            last: this.$route.name,
-          },
-          params: {
-            channelId: channel.id,
-          },
-        };
-      },
-      openDropDown(channel) {
-        this.selectedChannel = channel;
-        this.dropDownArr = this.dropDownItems(channel);
-      },
-      dropDownItems(channel) {
-        this.selectedChannel = channel;
-        let options = [
-          {
-            label: this.$tr('editChannel'),
-            icon: 'edit',
-            value: 'edit',
-          },
-          {
-            label: this.$tr('copyToken'),
-            icon: 'copy',
-            value: 'copy',
-          },
-          {
-            label: this.$tr('goToWebsite'),
-            icon: 'openNewTab',
-            value: 'source-url',
-          },
-          {
-            label: this.$tr('viewContent'),
-            icon: 'openNewTab',
-            value: 'demo-url',
-          },
-          {
-            label: this.canEdit ? this.$tr('deleteChannel') : this.$tr('removeChannel'),
-            icon: 'trash',
-            value: 'delete',
-          },
-        ];
-        if (!channel.published) {
-          options = options.filter(item => item.value !== 'copy');
-        }
-        if (channel.source_url === '') {
-          options = options.filter(item => item.value !== 'source-url');
-        }
-        if (channel.demo_server_url === '') {
-          options = options.filter(item => item.value !== 'demo-url');
-        }
-        return options;
-      },
-      selectedItem(option, channel) {
-        const value = option.value;
-        this.selectedChannel = channel;
-        if (value === 'edit') {
-          this.channelEditLink(channel);
-        } else if (value === 'copy') {
-          this.tokenDialog = true;
-        } else if (value === 'delete') {
-          this.deleteDialog = true;
-        } else if (value === 'source-url') {
-          window.open(channel.source_url, '_blank');
-        } else if (value === 'demo-url') {
-          window.open(channel.demo_server_url, '_blank');
-        }
-      },
-      channelEditLink(channel) {
-        this.$router.push({
-          name: RouteNames.CHANNEL_EDIT,
-          query: {
-            // this component is used on the catalog search
-            // page => do not lose search query
-            ...this.$route.query,
-            last: this.$route.name,
-          },
-          params: {
-            channelId: channel.id,
-            tab: 'edit',
-          },
-        });
-      },
-      handleDelete() {
-        if (!this.canEdit) {
-          const currentUserId = this.$store.state.session.currentUser.id;
-          this.removeViewer({ channelId: this.selectedChannel.id, userId: currentUserId }).then(
-            () => {
-              this.deleteDialog = false;
-              this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
-            },
-          );
-        } else {
-          this.deleteChannel(this.selectedChannel.id).then(() => {
-            this.deleteDialog = false;
-            this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
-          });
-        }
-      },
-      thumbnailSrc(channel) {
-        return channel.thumbnail_encoding && channel.thumbnail_encoding.base64
-          ? channel.thumbnail_encoding.base64
-          : channel.thumbnail_url;
-      },
-      getPublishStatus(channel) {
-        return channel.last_published
-          ? this.$tr('lastPublished', {
-            last_published: this.$formatRelative(channel.last_published, {
-              now: new Date(),
-            }),
-          })
-          : this.$tr('unpublishedText');
-      },
-    },
     $trs: {
       channel: 'New channel',
       noChannelsFound: 'No channels found',
-      resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
-      unpublishedText: 'Unpublished',
-      lastPublished: 'Published {last_published}',
-      lastUpdated: 'Updated {updated}',
-      details: 'Details',
-      viewContent: 'View channel on Kolibri',
-      goToWebsite: 'Go to source website',
-      editChannel: 'Edit channel details',
-      copyToken: 'Copy channel token',
-      deleteChannel: 'Delete channel',
-      deleteTitle: 'Delete this channel',
-      removeChannel: 'Remove from channel list',
-      removeBtn: 'Remove',
-      removeTitle: 'Remove from channel list',
-      deletePrompt: 'This channel will be permanently deleted. This cannot be undone.',
-      removePrompt:
-        'You have view-only access to this channel. Confirm that you want to remove it from your list of channels.',
-      channelDeletedSnackbar: 'Channel deleted',
-      channelRemovedSnackbar: 'Channel removed',
-      channelLanguageNotSetIndicator: 'No language set',
-      cancel: 'Cancel',
     },
   };
 
@@ -439,108 +85,6 @@
 
 <style lang="scss" scoped>
 
-  .my-channels {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    min-height: calc(100% - 64px - 48px);
-  }
-
-  .no-channels {
-    padding: 16px 0 0 16px;
-    font-size: 24px;
-  }
-
-  .new-channel {
-    display: flex;
-    justify-content: end;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  .cards {
-    margin-top: 16px;
-
-    /* check this below class, this should be coming form KDS */
-    ::v-deep .visuallyhidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      border: 0;
-    }
-  }
-
-  .cards-below-title {
-    font-size: 14px;
-  }
-
-  .cards-resource {
-    span:first-child::after {
-      margin: 0 8px;
-      content: '•';
-    }
-  }
-
-  .cards-desc {
-    margin-top: 12px;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .footer-right,
-  .footer-left,
-  .last-updated {
-    display: flex;
-    align-items: center;
-  }
-
-  .footer-left {
-    span {
-      font-size: 14px;
-    }
-
-    div {
-      margin-left: 8px;
-    }
-  }
-
-  .details-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-    }
-
-    a {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .details-icon {
-    width: 100%;
-    height: 100%;
-  }
-
-  .img-placeholder-icon {
-    width: 50%;
-    min-width: 24px;
-    height: 50%;
-  }
+  @import './styles/StudioChannels';
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue
new file mode 100644
index 0000000000..1393555853
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/StudioStarredChannels.vue
@@ -0,0 +1,76 @@
+<template>
+
+  <div class="studio-channels">
+    <div
+      class="channels-body"
+      :style="{ maxWidth: maxWidthStyle }"
+    >
+      <p
+        v-if="!listChannels.length && !loading"
+        class="no-channels"
+      >
+        {{ $tr('noChannelsFound') }}
+      </p>
+      <KCardGrid
+        layout="1-1-1"
+        :loading="loading"
+        :skeletonsConfig="[
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            orientation: 'vertical',
+            count: 3,
+          },
+        ]"
+        class="cards"
+      >
+        <StudioChannelCard
+          v-for="(channel, index) in listChannels"
+          :key="channel.id"
+          :channel="channel"
+          :index="index"
+        />
+      </KCardGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { useChannelList } from '../../composables/useChannelList';
+  import StudioChannelCard from './components/StudioChannelCard';
+  import { ChannelListTypes } from 'shared/constants';
+
+  export default {
+    name: 'StudioStarredChannels',
+    components: {
+      StudioChannelCard,
+    },
+    setup() {
+      // Use the channel list composable with STARRED type
+      const { loading, listChannels, maxWidthStyle } = useChannelList({
+        listType: ChannelListTypes.STARRED,
+        sortFields: ['modified'],
+        orderFields: ['desc'],
+      });
+
+      return {
+        loading,
+        listChannels,
+        maxWidthStyle,
+      };
+    },
+    $trs: {
+      noChannelsFound: 'No channels found',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import './styles/StudioChannels';
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js
new file mode 100644
index 0000000000..d14bbb2047
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/StudioStarredChannels.spec.js
@@ -0,0 +1,170 @@
+import { render, fireEvent, screen, within } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import { Store } from 'vuex';
+import StudioStarredChannels from '../StudioStarredChannels.vue';
+
+const mockChannels = [
+  {
+    id: '1',
+    name: 'channel one',
+    edit: true,
+    published: true,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel one description',
+    bookmark: true,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+  {
+    id: '2',
+    name: 'channel two',
+    edit: true,
+    published: false,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel two description',
+    bookmark: false,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+  {
+    id: '3',
+    name: 'channel three',
+    edit: true,
+    published: true,
+    source_url: 'https://example.com',
+    demo_server_url: 'https://demo.com',
+    deleted: false,
+    modified: 2,
+    last_published: 1,
+    description: 'Channel three description',
+    bookmark: false,
+    count: 5,
+    thumbnail_url: '',
+    language: 'en',
+  },
+];
+
+const router = new VueRouter({
+  routes: [
+    { name: 'CHANNEL_DETAILS', path: '/:channelId/details' },
+    { name: 'CHANNEL_EDIT', path: '/:channelId/:tab' },
+  ],
+});
+
+function renderComponent(store) {
+  return render(StudioStarredChannels, {
+    store,
+    routes: router,
+  });
+}
+
+const store = new Store({
+  modules: {
+    channel: {
+      namespaced: true,
+      getters: {
+        channels: () => {
+          return mockChannels;
+        },
+      },
+      actions: {
+        loadChannelList: jest.fn(),
+        createChannel: jest.fn(),
+      },
+    },
+  },
+});
+
+describe('StudioStarredChannels.vue', () => {
+  it('renders starred channels', async () => {
+    renderComponent(store);
+    const card0 = await screen.findByTestId('card-0');
+    const cardElements = screen.queryAllByTestId(testId => testId.startsWith('card-'));
+
+    expect(card0).toHaveTextContent('channel one');
+    expect(within(card0).getByTestId('details-button-0')).toBeInTheDocument();
+    expect(within(card0).getByTestId('dropdown-button-0')).toBeInTheDocument();
+
+    expect(cardElements.length).toBe(1);
+  });
+
+  it(`Shows 'No channel found' when there are no channels`, async () => {
+    const store = new Store({
+      modules: {
+        channel: {
+          namespaced: true,
+          getters: {
+            channels: () => {
+              return [];
+            },
+          },
+          actions: {
+            loadChannelList: jest.fn(),
+            createChannel: jest.fn(),
+          },
+        },
+      },
+    });
+    renderComponent(store);
+    const cardElements = screen.queryAllByTestId(testId => testId.startsWith('card-'));
+    expect(cardElements.length).toBe(0);
+  });
+
+  it('open dropdown for published channel', async () => {
+    renderComponent(store);
+    const dropdownButton = await screen.findByTestId('dropdown-button-0');
+    await fireEvent.click(dropdownButton);
+    expect(screen.getByText('Edit channel details')).toBeInTheDocument();
+    expect(screen.getByText('Delete channel')).toBeInTheDocument();
+    expect(screen.getByText('Go to source website')).toBeInTheDocument();
+    expect(screen.getByText('View channel on Kolibri')).toBeInTheDocument();
+    expect(screen.getByText('Copy channel token')).toBeInTheDocument();
+    const listItems = document.querySelectorAll('.ui-focus-container-content li');
+    expect(listItems.length).toBe(5);
+  });
+
+  it('opens delete modal and close', async () => {
+    renderComponent(store);
+    const dropdownButton = await screen.findByTestId('dropdown-button-0');
+    await fireEvent.click(dropdownButton);
+    const deleteButton = screen.getByText('Delete channel');
+    await fireEvent.click(deleteButton);
+    let deleteModal = document.querySelector('[data-testid="delete-modal"]');
+    expect(deleteModal).not.toBeNull();
+    const closeDeleteModal = screen.getByText('Cancel');
+    await fireEvent.click(closeDeleteModal);
+    deleteModal = document.querySelector('[data-testid="delete-modal"]');
+    expect(deleteModal).toBeNull();
+  });
+
+  it('open copy modal and close', async () => {
+    renderComponent(store);
+    const dropdownButton = await screen.findByTestId('dropdown-button-0');
+    await fireEvent.click(dropdownButton);
+    const copyButton = screen.getByText('Copy channel token');
+    await fireEvent.click(copyButton);
+    let copyModal = document.querySelector('[data-testid="copy-modal"]');
+    expect(copyModal).not.toBeNull();
+    const closeCopyModal = screen.getByText('Close');
+    await fireEvent.click(closeCopyModal);
+    copyModal = document.querySelector('[data-testid="copy-modal"]');
+    expect(copyModal).toBeNull();
+  });
+
+  it('detail button takes to details page', async () => {
+    renderComponent(store);
+    const detailsButton = await screen.findByTestId('details-button-0');
+    await fireEvent.click(detailsButton);
+    expect(router.currentRoute.path).toBe('/1/details');
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
new file mode 100644
index 0000000000..142a28291f
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/StudioChannelCard.vue
@@ -0,0 +1,431 @@
+<template>
+
+  <div class="channel-card">
+    <KCard
+      :key="channel.id"
+      :headingLevel="2"
+      thumbnailDisplay="small"
+      :thumbnailSrc="thumbnailSrc(channel)"
+      :thumbnailAlign="'left'"
+      :thumbnailScaleType="'contain'"
+      :orientation="windowIsSmall ? 'vertical' : 'horizontal'"
+      :title="channel.name"
+      :titleMaxLines="2"
+      :data-testid="`card-${index}`"
+      @click="goToChannelRoute(channel)"
+    >
+      <template #thumbnailPlaceholder>
+        <KIcon
+          :color="$themePalette.grey.v_400"
+          class="img-placeholder-icon"
+          icon="image"
+        />
+      </template>
+      <template #belowTitle>
+        <div class="cards-below-title">
+          <div class="cards-resource">
+            <span> {{ $tr('resourceCount', { count: channel.count || 0 }) }} </span>
+            <span>
+              {{ language(channel) }}
+            </span>
+          </div>
+          <div
+            class="cards-desc"
+            :style="{ color: $themePalette.text }"
+          >
+            {{ channel.description }}
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="footer">
+          <div class="footer-left">
+            <span :style="{ color: $themeTokens.annotation }">
+              {{ getPublishStatus(channel) }}
+            </span>
+            <div>
+              <KTooltip
+                :reference="`lastUpdatedTime-${index}`"
+                placement="bottom"
+                :refs="$refs"
+              >
+                {{
+                  $tr('lastUpdated', {
+                    updated: $formatRelative(channel.modified, { now: new Date() }),
+                  })
+                }}
+              </KTooltip>
+              <div
+                v-if="hasUnpublishedChanges(channel)"
+                class="last-updated"
+              >
+                <KIcon
+                  :ref="`lastUpdatedTime-${index}`"
+                  :color="$themePalette.green.v_600"
+                  icon="dot"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="footer-right">
+            <div
+              :ref="`detailIcon${index}`"
+              class="details-link"
+            >
+              <router-link
+                :data-testid="`details-button-${index}`"
+                :to="channelDetailsLink(channel)"
+                @click.native.stop
+              >
+                <KIcon
+                  class="details-icon"
+                  :color="$themeTokens.primary"
+                  icon="info"
+                />
+              </router-link>
+              <KTooltip
+                :reference="`detailIcon${index}`"
+                :refs="$refs"
+                maxWidth="200px"
+              >
+                {{ $tr('details') }}
+              </KTooltip>
+            </div>
+
+            <ChannelStar
+              :channelId="channel.id"
+              :data-testid="`bookmark-button-${index}`"
+              :bookmark="channel.bookmark"
+            />
+            <KIconButton
+              size="small"
+              icon="optionsVertical"
+              appearance="flat-button"
+              :data-testid="`dropdown-button-${index}`"
+              @click.stop="openDropDown(channel, index)"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :hasIcons="true"
+                  :options="dropDownArr"
+                  @select="option => selectedItem(option, channel)"
+                />
+              </template>
+            </KIconButton>
+          </div>
+        </div>
+      </template>
+    </KCard>
+
+    <KModal
+      v-if="deleteDialog"
+      :title="canEdit ? $tr('deleteTitle') : $tr('removeTitle')"
+      :submitText="canEdit ? $tr('deleteChannel') : $tr('removeBtn')"
+      :cancelText="$tr('cancel')"
+      data-testid="delete-modal"
+      @submit="handleDelete"
+      @cancel="deleteDialog = false"
+    >
+      {{ canEdit ? $tr('deletePrompt') : $tr('removePrompt') }}
+    </KModal>
+    <ChannelTokenModal
+      v-if="selectedChannel && selectedChannel.published"
+      v-model="tokenDialog"
+      data-testid="copy-modal"
+      :channel="selectedChannel"
+      @copied="trackTokenCopy"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapActions } from 'vuex';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { RouteNames } from '../../../constants';
+  import ChannelStar from '../ChannelStar';
+  import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
+  import Languages from 'shared/leUtils/Languages';
+
+  export default {
+    name: 'StudioChannelCard',
+    components: {
+      ChannelStar,
+      ChannelTokenModal,
+    },
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
+    props: {
+      channel: {
+        type: Object,
+        required: true,
+      },
+      index: {
+        type: Number,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        tokenDialog: false,
+        deleteDialog: false,
+        selectedChannel: {
+          published: false,
+        },
+        dropDownArr: [],
+      };
+    },
+    computed: {
+      // channel items properties
+      canEdit() {
+        return this.selectedChannel.edit;
+      },
+    },
+    methods: {
+      ...mapActions('channel', ['deleteChannel', 'removeViewer']),
+      language(channel) {
+        const lang = Languages.get(channel.language);
+        if (lang) {
+          return lang.native_name;
+        }
+        return this.$tr('channelLanguageNotSetIndicator');
+      },
+      goToChannelRoute(channel) {
+        window.location.href = window.Urls.channel(channel.id);
+      },
+      channelDetailsLink(channel) {
+        return {
+          name: RouteNames.CHANNEL_DETAILS,
+          query: {
+            // this component is used on the catalog search
+            // page => do not lose search query
+            ...this.$route.query,
+            last: this.$route.name,
+          },
+          params: {
+            channelId: channel.id,
+          },
+        };
+      },
+      openDropDown(channel) {
+        this.selectedChannel = channel;
+        this.dropDownArr = this.dropDownItems(channel);
+      },
+      dropDownItems(channel) {
+        this.selectedChannel = channel;
+        let options = [
+          {
+            label: this.$tr('editChannel'),
+            icon: 'edit',
+            value: 'edit',
+          },
+          {
+            label: this.$tr('copyToken'),
+            icon: 'copy',
+            value: 'copy',
+          },
+          {
+            label: this.$tr('goToWebsite'),
+            icon: 'openNewTab',
+            value: 'source-url',
+          },
+          {
+            label: this.$tr('viewContent'),
+            icon: 'openNewTab',
+            value: 'demo-url',
+          },
+          {
+            label: this.canEdit ? this.$tr('deleteChannel') : this.$tr('removeChannel'),
+            icon: 'trash',
+            value: 'delete',
+          },
+        ];
+        if (!channel.published) {
+          options = options.filter(item => item.value !== 'copy');
+        }
+        if (channel.source_url === '') {
+          options = options.filter(item => item.value !== 'source-url');
+        }
+        if (channel.demo_server_url === '') {
+          options = options.filter(item => item.value !== 'demo-url');
+        }
+        return options;
+      },
+      selectedItem(option, channel) {
+        const value = option.value;
+        this.selectedChannel = channel;
+        if (value === 'edit') {
+          this.channelEditLink(channel);
+        } else if (value === 'copy') {
+          this.tokenDialog = true;
+        } else if (value === 'delete') {
+          this.deleteDialog = true;
+        } else if (value === 'source-url') {
+          window.open(channel.source_url, '_blank');
+        } else if (value === 'demo-url') {
+          window.open(channel.demo_server_url, '_blank');
+        }
+      },
+      channelEditLink(channel) {
+        this.$router.push({
+          name: RouteNames.CHANNEL_EDIT,
+          query: {
+            // this component is used on the catalog search
+            // page => do not lose search query
+            ...this.$route.query,
+            last: this.$route.name,
+          },
+          params: {
+            channelId: channel.id,
+            tab: 'edit',
+          },
+        });
+      },
+      handleDelete() {
+        if (!this.canEdit) {
+          const currentUserId = this.$store.state.session.currentUser.id;
+          this.removeViewer({ channelId: this.selectedChannel.id, userId: currentUserId }).then(
+            () => {
+              this.deleteDialog = false;
+              this.$store.dispatch('showSnackbarSimple', this.$tr('channelRemovedSnackbar'));
+            },
+          );
+        } else {
+          this.deleteChannel(this.selectedChannel.id).then(() => {
+            this.deleteDialog = false;
+            this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
+          });
+        }
+      },
+      trackTokenCopy() {
+        this.$analytics.trackAction('channel_list', 'Copy token', {
+          eventLabel: this.selectedChannel.primary_token,
+        });
+      },
+      thumbnailSrc(channel) {
+        return channel.thumbnail_encoding && channel.thumbnail_encoding.base64
+          ? channel.thumbnail_encoding.base64
+          : channel.thumbnail_url;
+      },
+      hasUnpublishedChanges(channel) {
+        return !channel.last_published || channel.modified > channel.last_published;
+      },
+      getPublishStatus(channel) {
+        return channel.last_published
+          ? this.$tr('lastPublished', {
+            last_published: this.$formatRelative(channel.last_published, {
+              now: new Date(),
+            }),
+          })
+          : this.$tr('unpublishedText');
+      },
+    },
+    $trs: {
+      resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
+      unpublishedText: 'Unpublished',
+      lastPublished: 'Published {last_published}',
+      lastUpdated: 'Updated {updated}',
+      details: 'Details',
+      viewContent: 'View channel on Kolibri',
+      goToWebsite: 'Go to source website',
+      editChannel: 'Edit channel details',
+      copyToken: 'Copy channel token',
+      deleteChannel: 'Delete channel',
+      deleteTitle: 'Delete this channel',
+      removeChannel: 'Remove from channel list',
+      removeBtn: 'Remove',
+      removeTitle: 'Remove from channel list',
+      deletePrompt: 'This channel will be permanently deleted. This cannot be undone.',
+      removePrompt:
+        'You have view-only access to this channel. Confirm that you want to remove it from your list of channels.',
+      channelDeletedSnackbar: 'Channel deleted',
+      channelRemovedSnackbar: 'Channel removed',
+      channelLanguageNotSetIndicator: 'No language set',
+      cancel: 'Cancel',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .channel-card {
+    width: 100%;
+  }
+
+  .cards-below-title {
+    font-size: 14px;
+  }
+
+  .cards-resource {
+    span:first-child::after {
+      margin: 0 8px;
+      content: '•';
+    }
+  }
+
+  .cards-desc {
+    margin-top: 12px;
+  }
+
+  .details-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    a {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .footer-right,
+  .footer-left,
+  .last-updated {
+    display: flex;
+    align-items: center;
+  }
+
+  .footer-left {
+    span {
+      font-size: 14px;
+    }
+
+    div {
+      margin-left: 8px;
+    }
+  }
+
+  .details-icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  .img-placeholder-icon {
+    width: 50%;
+    min-width: 24px;
+    height: 50%;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss b/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss
new file mode 100644
index 0000000000..0903bf8f87
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/styles/StudioChannels.scss
@@ -0,0 +1,107 @@
+.studio-channels {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: calc(100% - 64px - 48px);
+}
+
+.no-channels {
+  padding: 16px 0 0 16px;
+  font-size: 24px;
+}
+
+.channels-body {
+  width: 100%;
+}
+
+.new-channel {
+  display: flex;
+  justify-content: end;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.cards {
+  margin-top: 16px;
+
+  /* check this below class, this should be coming form KDS */
+  ::v-deep .visuallyhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+  }
+}
+
+.cards-below-title {
+  font-size: 14px;
+}
+
+.cards-resource {
+  span:first-child::after {
+    margin: 0 8px;
+    content: '•';
+  }
+}
+
+.cards-desc {
+  margin-top: 12px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer-right,
+.footer-left,
+.last-updated {
+  display: flex;
+  align-items: center;
+}
+
+.footer-left {
+  span {
+    font-size: 14px;
+  }
+
+  div {
+    margin-left: 8px;
+  }
+}
+
+.details-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  a {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.details-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.img-placeholder-icon {
+  width: 50%;
+  min-width: 24px;
+  height: 50%;
+}

From 92294f7e872049164a70f88bd05a7684823c9fcd Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Mon, 17 Nov 2025 11:18:30 +0530
Subject: [PATCH 2/3] small change

---
 .../frontend/channelList/composables/useChannelList.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
index 54e8991ecb..5cd8f3cfe4 100644
--- a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
+++ b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
@@ -11,11 +11,10 @@ import { RouteNames } from '../constants';
  * @param {string} options.listType - Type of channel list (from ChannelListTypes)
  * @param {Array<string>} options.sortFields - Fields to sort by (default: ['modified'])
  * @param {Array<string>} options.orderFields - Sort order (default: ['desc'])
- * @param {Function} options.filterFn - Additional filter function for channels
  * @returns {Object} Channel list state and methods
  */
 export function useChannelList(options = {}) {
-  const { listType, sortFields = ['modified'], orderFields = ['desc'], filterFn = null } = options;
+  const { listType, sortFields = ['modified'], orderFields = ['desc'] } = options;
 
   const instance = getCurrentInstance();
   const store = instance.proxy.$store;
@@ -34,11 +33,7 @@ export function useChannelList(options = {}) {
       return [];
     }
 
-    let filtered = channels.value.filter(channel => channel[listType] && !channel.deleted);
-
-    if (filterFn && typeof filterFn === 'function') {
-      filtered = filtered.filter(filterFn);
-    }
+    const filtered = channels.value.filter(channel => channel[listType] && !channel.deleted);
 
     return orderBy(filtered, sortFields, orderFields);
   });
@@ -56,7 +51,6 @@ export function useChannelList(options = {}) {
     return '100%';
   });
 
-  // Methods
   const loadData = async () => {
     loading.value = true;
     try {

From 4d1f21a2c16670b8236c59c743e6ebdc1917e42a Mon Sep 17 00:00:00 2001
From: Yeshwanth munagapati <m.yeshwanth235@gmail.com>
Date: Mon, 17 Nov 2025 16:12:48 +0530
Subject: [PATCH 3/3] small changes

---
 .../channelList/composables/useChannelList.js | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
index 5cd8f3cfe4..f35b0c707a 100644
--- a/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
+++ b/contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js
@@ -77,33 +77,6 @@ export function useChannelList(options = {}) {
     window.location.href = window.Urls.channel(channelId);
   };
 
-  const channelDetailsLink = channel => {
-    return {
-      name: RouteNames.CHANNEL_DETAILS,
-      query: {
-        ...route.query,
-        last: route.name,
-      },
-      params: {
-        channelId: channel.id,
-      },
-    };
-  };
-
-  const channelEditLink = channel => {
-    return {
-      name: RouteNames.CHANNEL_EDIT,
-      query: {
-        ...route.query,
-        last: route.name,
-      },
-      params: {
-        channelId: channel.id,
-        tab: 'edit',
-      },
-    };
-  };
-
   onMounted(() => {
     loadData();
   });
@@ -119,7 +92,5 @@ export function useChannelList(options = {}) {
     loadData,
     newChannel,
     goToChannel,
-    channelDetailsLink,
-    channelEditLink,
   };
 }