Channel cards to unstable

.gitignore

@@ -25,6 +25,7 @@ var/
 
 # Ignore editor / IDE related data
 .vscode/
+.claude/
 
 # IntelliJ IDE, except project config
 .idea/

contentcuration/contentcuration/frontend/channelList/composables/useChannelList.js

@@ -0,0 +1,44 @@
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+import orderBy from 'lodash/orderBy';
+
+/**
+ * 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'])
+ * @returns {Object} Loading state and filtered & sorted channels
+ */
+export function useChannelList(options = {}) {
+  const { listType, sortFields = ['modified'], orderFields = ['desc'] } = options;
+
+  const instance = getCurrentInstance();
+  const store = instance.proxy.$store;
+
+  const loading = ref(false);
+
+  const allChannels = computed(() => store.getters['channel/channels'] || []);
+
+  const channels = computed(() => {
+    if (!allChannels.value || allChannels.value.length === 0) {
+      return [];
+    }
+
+    const filtered = allChannels.value.filter(channel => channel[listType] && !channel.deleted);
+
+    return orderBy(filtered, sortFields, orderFields);
+  });
+
+  onMounted(() => {
+    loading.value = true;
+    store.dispatch('channel/loadChannelList', { listType }).then(() => {
+      loading.value = false;
+    });
+  });
+
+  return {
+    loading,
+    channels,
+  };
+}

contentcuration/contentcuration/frontend/channelList/router.js

@@ -1,23 +1,22 @@
 import VueRouter from 'vue-router';
-import ChannelList from './views/Channel/ChannelList';
+import StudioMyChannels from './views/Channel/StudioMyChannels';
+import StudioStarredChannels from './views/Channel/StudioStarredChannels';
+import StudioViewOnlyChannels from './views/Channel/StudioViewOnlyChannels';
 import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
 import { RouteNames } from './constants';
 import CatalogFAQ from './views/Channel/CatalogFAQ';
 import ChannelModal from 'shared/views/channel/ChannelModal';
 import ChannelDetailsModal from 'shared/views/channel/ChannelDetailsModal';
-import { ChannelListTypes } from 'shared/constants';
 
 const router = new VueRouter({
   routes: [
     {
       name: RouteNames.CHANNELS_EDITABLE,
       path: '/my-channels',
-      component: ChannelList,
-      props: { listType: ChannelListTypes.EDITABLE },
+      component: StudioMyChannels,
     },
-
     {
       name: RouteNames.CHANNEL_SETS,
       path: '/collections',
@@ -38,14 +37,12 @@ const router = new VueRouter({
     {
       name: RouteNames.CHANNELS_STARRED,
       path: '/starred',
-      component: ChannelList,
-      props: { listType: ChannelListTypes.STARRED },
+      component: StudioStarredChannels,
     },
     {
       name: RouteNames.CHANNELS_VIEW_ONLY,
       path: '/view-only',
-      component: ChannelList,
-      props: { listType: ChannelListTypes.VIEW_ONLY },
+      component: StudioViewOnlyChannels,
     },
     {
       name: RouteNames.CHANNEL_DETAILS,