From dbb8233e3b12765d162b676ed62208c2a54ee6ea Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:00:21 +0300
Subject: [PATCH 01/14] adds accesible channel card

---
 .../LibraryPage/AccessibleChannelCard.vue     | 35 +++++++++++++++++++
 .../src/views/LibraryPage/OtherLibraries.vue  | 16 +++++++++
 .../assets/src/views/LibraryPage/index.vue    |  2 ++
 3 files changed, 53 insertions(+)
 create mode 100644 kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
new file mode 100644
index 00000000000..c204092b4ee
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
@@ -0,0 +1,35 @@
+<template>
+
+  <div>
+    <KCard
+      :to="to"
+      layout="horizontal"
+      thumbnailDisplay="small"
+    >
+      <template #aboveTitle>
+        <p>Above title</p>
+      </template>
+      <template #belowTitle>
+        <div>
+          <p>Below title</p>
+        </div>
+      </template>
+    </KCard>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'AccessibleChannelCard',
+    props:{
+      to: {
+        type: Object,
+        required: true,
+      },
+    }
+  }
+
+</script>
\ No newline at end of file
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index 461d64d41f3..d0d256ccbbf 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -132,6 +132,20 @@
         />
       </KGridItem>
     </KGrid>
+
+    <h2>Accessible Channel card</h2>
+
+    <KGrid>
+      <KGridItem
+        v-for="device in unpinnedDevices.slice(0, cardsToDisplay)"
+        :key="device.id"
+        :layout="{ span: layoutSpan }"
+      >
+        <AccessibleChannelCard 
+          :to="genLibraryPageBackLink(device.id)"
+        />
+      </KGridItem>
+    </KGrid>
   </div>
 
 </template>
@@ -150,6 +164,7 @@
   import LibraryItem from '../ExploreLibrariesPage/LibraryItem';
   import FadeInTransitionGroup from '../FadeInTransitionGroup';
   import UnPinnedDevices from './UnPinnedDevices';
+  import AccessibleChannelCard from './AccessibleChannelCard.vue';
 
   export default {
     name: 'OtherLibraries',
@@ -157,6 +172,7 @@
       FadeInTransitionGroup,
       LibraryItem,
       UnPinnedDevices,
+      AccessibleChannelCard
     },
     setup() {
       const {
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 0d876c0e62b..4f1e4632212 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -81,6 +81,8 @@
             data-test="other-libraries"
             :injectedtr="injecttr"
           />
+
+          
         </div>
 
         <SearchResultsGrid

From 2d51c5f729a2e4111cdcc1d56a6a5add1c440bc4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:00:36 +0300
Subject: [PATCH 02/14] restores code in other library page

---
 .../src/views/LibraryPage/OtherLibraries.vue     | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index d0d256ccbbf..461d64d41f3 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -132,20 +132,6 @@
         />
       </KGridItem>
     </KGrid>
-
-    <h2>Accessible Channel card</h2>
-
-    <KGrid>
-      <KGridItem
-        v-for="device in unpinnedDevices.slice(0, cardsToDisplay)"
-        :key="device.id"
-        :layout="{ span: layoutSpan }"
-      >
-        <AccessibleChannelCard 
-          :to="genLibraryPageBackLink(device.id)"
-        />
-      </KGridItem>
-    </KGrid>
   </div>
 
 </template>
@@ -164,7 +150,6 @@
   import LibraryItem from '../ExploreLibrariesPage/LibraryItem';
   import FadeInTransitionGroup from '../FadeInTransitionGroup';
   import UnPinnedDevices from './UnPinnedDevices';
-  import AccessibleChannelCard from './AccessibleChannelCard.vue';
 
   export default {
     name: 'OtherLibraries',
@@ -172,7 +157,6 @@
       FadeInTransitionGroup,
       LibraryItem,
       UnPinnedDevices,
-      AccessibleChannelCard
     },
     setup() {
       const {

From c8a299f3175a8f0569155e9996690e7c63a11c95 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:45:37 +0300
Subject: [PATCH 03/14] adds accessible channel card

---
 .../LibraryPage/AccessibleChannelCard.vue     | 37 ++++++++++++--
 .../HandleAccessibleChannelCard.vue           | 49 +++++++++++++++++++
 .../assets/src/views/LibraryPage/index.vue    |  6 ++-
 3 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
index c204092b4ee..f9c06a12160 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
@@ -5,13 +5,24 @@
       :to="to"
       layout="horizontal"
       thumbnailDisplay="small"
+      thumbnailAlign="right"
+      :title="title"
+      :headingLevel="headingLevel"
     >
-      <template #aboveTitle>
-        <p>Above title</p>
+      <template #thumbnailPlaceholder>
+        <div>
+          <ChannelThumbnail
+            :thumbnail="contentNode.thumbnail"
+            style="width:100px"
+          />
+        </div>
       </template>
       <template #belowTitle>
         <div>
-          <p>Below title</p>
+          <KTextTruncator
+            :text="contentNode.description"
+            :maxLines="2"
+          />
         </div>
       </template>
     </KCard>
@@ -22,14 +33,32 @@
 
 <script>
 
+  import ChannelThumbnail from './../ChannelThumbnail.vue';
+
   export default {
     name: 'AccessibleChannelCard',
+    components:{
+      ChannelThumbnail,
+    },
     props:{
       to: {
         type: Object,
         required: true,
       },
-    }
+      title:{
+        type: String,
+        required: true,
+      },
+      headingLevel:{
+        type: Number,
+        required: false,
+        default: 2,
+      },
+      contentNode: {
+        type: Object,
+        required: true,
+      },
+    },
   }
 
 </script>
\ No newline at end of file
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
new file mode 100644
index 00000000000..17c133063dc
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -0,0 +1,49 @@
+<template>
+
+  <div>
+    <h2>Accessible Channel Card</h2>
+    <KGrid>
+      <KGridItem
+        v-for="device in contentNode"
+        :key="device.id"
+        :layout="{ span: layoutSpan }"
+      >
+        <AccessibleChannelCard
+          :to="{}"
+          :contentNode="device"
+          :title="device.title"
+          :headingLevel="2"
+          :style="{ marginBottom: '24px' }"
+        />
+      </KGridItem>
+    </KGrid>
+  </div>
+
+</template>
+
+
+<script>
+
+  import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
+  import AccessibleChannelCard from './AccessibleChannelCard';
+
+  export default {
+    name: 'HandleAccessibleChannelCard',
+    components: {
+      AccessibleChannelCard,
+    },
+    setup() {
+      const { layoutSpan } = useCardLayoutSpan();
+      return {
+        layoutSpan,
+      };
+    },
+    props:{
+      contentNode: {
+        type: Array,
+        required: true,
+      },
+    }
+  }
+
+</script>
\ No newline at end of file
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 4f1e4632212..0a3afbc0db5 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -82,7 +82,9 @@
             :injectedtr="injecttr"
           />
 
-          
+          <HandleAccessibleChannelCard
+            :contentNode="rootNodes"
+          />
         </div>
 
         <SearchResultsGrid
@@ -199,6 +201,7 @@
   import useChannels from './../../composables/useChannels';
   import ResumableContentGrid from './ResumableContentGrid';
   import OtherLibraries from './OtherLibraries';
+  import HandleAccessibleChannelCard from './HandleAccessibleChannelCard.vue';
 
   const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
@@ -221,6 +224,7 @@
       LearnAppBarPage,
       OtherLibraries,
       PostSetupModalGroup,
+      HandleAccessibleChannelCard
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {

From 60607064da57c46c175921031a3f0dad3166297e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 21 Aug 2024 23:05:48 +0300
Subject: [PATCH 04/14] adds routing when card is clicked

---
 .../views/LibraryPage/AccessibleChannelCard.vue   | 15 +++++++++++++++
 .../LibraryPage/HandleAccessibleChannelCard.vue   |  5 ++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
index f9c06a12160..9dfd1d51439 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
@@ -19,6 +19,10 @@
       </template>
       <template #belowTitle>
         <div>
+          <KTextTruncator
+            :text="numberOfResources"
+            :maxLines="1"
+          />
           <KTextTruncator
             :text="contentNode.description"
             :maxLines="2"
@@ -59,6 +63,17 @@
         required: true,
       },
     },
+    computed:{
+      numberOfResources(){
+        return `${this.contentNode.num_coach_contents} ${this.$tr('resources')}`;
+      }
+    },
+    $trs: {
+      resources: {
+        message: 'Resources',
+        context: 'Number of resources in a channel',
+      },
+    }
   }
 
 </script>
\ No newline at end of file
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
index 17c133063dc..d2c93a9d768 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -9,7 +9,7 @@
         :layout="{ span: layoutSpan }"
       >
         <AccessibleChannelCard
-          :to="{}"
+          :to="genContentLinkBackLinkCurrentPage(device.id, false, null)"
           :contentNode="device"
           :title="device.title"
           :headingLevel="2"
@@ -25,6 +25,7 @@
 <script>
 
   import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
+  import useContentLink from '../../composables/useContentLink';
   import AccessibleChannelCard from './AccessibleChannelCard';
 
   export default {
@@ -34,8 +35,10 @@
     },
     setup() {
       const { layoutSpan } = useCardLayoutSpan();
+      const { genContentLinkBackLinkCurrentPage } = useContentLink();
       return {
         layoutSpan,
+        genContentLinkBackLinkCurrentPage
       };
     },
     props:{

From da2fe1974f852ec3a1d6a81ec34b50ea3da823cc Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 22 Aug 2024 18:12:03 +0300
Subject: [PATCH 05/14] update channel card

---
 .../LibraryPage/AccessibleChannelCard.vue     | 60 +++++++++----------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
index 9dfd1d51439..7e50994456f 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
@@ -1,36 +1,34 @@
 <template>
 
-  <div>
-    <KCard
-      :to="to"
-      layout="horizontal"
-      thumbnailDisplay="small"
-      thumbnailAlign="right"
-      :title="title"
-      :headingLevel="headingLevel"
-    >
-      <template #thumbnailPlaceholder>
-        <div>
-          <ChannelThumbnail
-            :thumbnail="contentNode.thumbnail"
-            style="width:100px"
-          />
-        </div>
-      </template>
-      <template #belowTitle>
-        <div>
-          <KTextTruncator
-            :text="numberOfResources"
-            :maxLines="1"
-          />
-          <KTextTruncator
-            :text="contentNode.description"
-            :maxLines="2"
-          />
-        </div>
-      </template>
-    </KCard>
-  </div>
+  <KCard
+    :to="to"
+    layout="horizontal"
+    thumbnailDisplay="small"
+    thumbnailAlign="right"
+    :title="title"
+    :headingLevel="headingLevel"
+  >
+    <template #thumbnailPlaceholder>
+      <div>
+        <ChannelThumbnail
+          :thumbnail="contentNode.thumbnail"
+          style="width:100px"
+        />
+      </div>
+    </template>
+    <template #belowTitle>
+      <div>
+        <KTextTruncator
+          :text="numberOfResources"
+          :maxLines="1"
+        />
+        <KTextTruncator
+          :text="contentNode.description"
+          :maxLines="2"
+        />
+      </div>
+    </template>
+  </KCard>
 
 </template>
 

From ddbd991aaaa99367641b291ebd69935915fbd92c Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 29 Aug 2024 01:17:48 +0300
Subject: [PATCH 06/14] channel card cleanup

---
 .../LibraryPage/AccessibleChannelCard.vue     | 26 ++++++++++---------
 .../HandleAccessibleChannelCard.vue           |  1 +
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
index 7e50994456f..3b22df496d1 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
@@ -5,14 +5,16 @@
     layout="horizontal"
     thumbnailDisplay="small"
     thumbnailAlign="right"
+    :thumbnailSrc="thumbnailSrc"
     :title="title"
     :headingLevel="headingLevel"
   >
     <template #thumbnailPlaceholder>
       <div>
-        <ChannelThumbnail
-          :thumbnail="contentNode.thumbnail"
-          style="width:100px"
+        <ContentIcon
+          kind="channel"
+          class="type-icon"
+          :color="$themeTokens.annotation"
         />
       </div>
     </template>
@@ -35,13 +37,15 @@
 
 <script>
 
-  import ChannelThumbnail from './../ChannelThumbnail.vue';
+  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
     name: 'AccessibleChannelCard',
     components:{
-      ChannelThumbnail,
+      ContentIcon,
     },
+    mixins: [commonCoreStrings],
     props:{
       to: {
         type: Object,
@@ -60,18 +64,16 @@
         type: Object,
         required: true,
       },
+      thumbnailSrc: {
+        type: String,
+        default: null,
+      },
     },
     computed:{
       numberOfResources(){
-        return `${this.contentNode.num_coach_contents} ${this.$tr('resources')}`;
+        return `${this.contentNode.num_coach_contents} ${this.coreString('resourcesLabel')}`;
       }
     },
-    $trs: {
-      resources: {
-        message: 'Resources',
-        context: 'Number of resources in a channel',
-      },
-    }
   }
 
 </script>
\ No newline at end of file
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
index d2c93a9d768..465c8c5e47b 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -13,6 +13,7 @@
           :contentNode="device"
           :title="device.title"
           :headingLevel="2"
+          :thumbnailSrc="device.thumbnail"
           :style="{ marginBottom: '24px' }"
         />
       </KGridItem>

From 018acfe1e1f8b787f220a5dad43c09fcdb3bb04f Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:41:52 +0300
Subject: [PATCH 07/14] move channel card to kolibri commons

---
 .../kolibri-common/components/Cards}/AccessibleChannelCard.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename {kolibri/plugins/learn/assets/src/views/LibraryPage => packages/kolibri-common/components/Cards}/AccessibleChannelCard.vue (99%)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
similarity index 99%
rename from kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
rename to packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
index 3b22df496d1..b53da7f0e26 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleChannelCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
@@ -37,7 +37,7 @@
 
 <script>
 
-  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
+  import ContentIcon from 'kolibri.coreVue.components.ContentIcon'
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {

From ddbec0987d44e06190530bb9e052b4b49653b6e9 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:42:18 +0300
Subject: [PATCH 08/14] move channel card to kolibri commons

---
 .../src/views/LibraryPage/HandleAccessibleChannelCard.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
index 465c8c5e47b..7ea8eb8d5ad 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -27,7 +27,7 @@
 
   import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
   import useContentLink from '../../composables/useContentLink';
-  import AccessibleChannelCard from './AccessibleChannelCard';
+  import AccessibleChannelCard from '../../../../../../../packages/kolibri-common/components/Cards/AccessibleChannelCard';
 
   export default {
     name: 'HandleAccessibleChannelCard',

From 9a75b82446bd8f0f44022724388c7d232fa3efc7 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:09:45 +0000
Subject: [PATCH 09/14] [pre-commit.ci lite] apply automatic fixes

---
 .../HandleAccessibleChannelCard.vue           | 10 +++++-----
 .../assets/src/views/LibraryPage/index.vue    |  6 ++----
 .../Cards/AccessibleChannelCard.vue           | 20 +++++++++----------
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
index 7ea8eb8d5ad..74f63695d89 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -39,15 +39,15 @@
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       return {
         layoutSpan,
-        genContentLinkBackLinkCurrentPage
+        genContentLinkBackLinkCurrentPage,
       };
     },
-    props:{
+    props: {
       contentNode: {
         type: Array,
         required: true,
       },
-    }
-  }
+    },
+  };
 
-</script>
\ No newline at end of file
+</script>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 0a3afbc0db5..a56150a01fb 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -82,9 +82,7 @@
             :injectedtr="injecttr"
           />
 
-          <HandleAccessibleChannelCard
-            :contentNode="rootNodes"
-          />
+          <HandleAccessibleChannelCard :contentNode="rootNodes" />
         </div>
 
         <SearchResultsGrid
@@ -224,7 +222,7 @@
       LearnAppBarPage,
       OtherLibraries,
       PostSetupModalGroup,
-      HandleAccessibleChannelCard
+      HandleAccessibleChannelCard,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {
diff --git a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
index b53da7f0e26..8d836e1d375 100644
--- a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
@@ -37,25 +37,25 @@
 
 <script>
 
-  import ContentIcon from 'kolibri.coreVue.components.ContentIcon'
+  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
     name: 'AccessibleChannelCard',
-    components:{
+    components: {
       ContentIcon,
     },
     mixins: [commonCoreStrings],
-    props:{
+    props: {
       to: {
         type: Object,
         required: true,
       },
-      title:{
+      title: {
         type: String,
         required: true,
       },
-      headingLevel:{
+      headingLevel: {
         type: Number,
         required: false,
         default: 2,
@@ -69,11 +69,11 @@
         default: null,
       },
     },
-    computed:{
-      numberOfResources(){
+    computed: {
+      numberOfResources() {
         return `${this.contentNode.num_coach_contents} ${this.coreString('resourcesLabel')}`;
-      }
+      },
     },
-  }
+  };
 
-</script>
\ No newline at end of file
+</script>

From b6507c86c3ff9569b045ed56fbc199bbc8faf6e5 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:25:08 +0300
Subject: [PATCH 10/14] adds a breaking point for card responsiveness

---
 .../HandleAccessibleChannelCard.vue           |  2 +-
 .../Cards/AccessibleChannelCard.vue           | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
index 74f63695d89..f3550491fdd 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
@@ -25,9 +25,9 @@
 
 <script>
 
+  import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard';
   import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
   import useContentLink from '../../composables/useContentLink';
-  import AccessibleChannelCard from '../../../../../../../packages/kolibri-common/components/Cards/AccessibleChannelCard';
 
   export default {
     name: 'HandleAccessibleChannelCard',
diff --git a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
index 8d836e1d375..92cdc4d0e57 100644
--- a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
@@ -2,7 +2,7 @@
 
   <KCard
     :to="to"
-    layout="horizontal"
+    :layout="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
     thumbnailDisplay="small"
     thumbnailAlign="right"
     :thumbnailSrc="thumbnailSrc"
@@ -39,6 +39,7 @@
 
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   export default {
     name: 'AccessibleChannelCard',
@@ -46,6 +47,12 @@
       ContentIcon,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       to: {
         type: Object,
@@ -77,3 +84,13 @@
   };
 
 </script>
+
+
+<style scoped>
+
+  .type-icon{
+    font-size: 3em;
+    right:10px;
+  }
+
+</style>
\ No newline at end of file

From 7c12b31d50b5dc51899c575b7f745facaa284fee Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:47:49 +0300
Subject: [PATCH 11/14] adds TODO comment

---
 kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index a56150a01fb..dbf39aa8197 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -81,7 +81,7 @@
             data-test="other-libraries"
             :injectedtr="injecttr"
           />
-
+          <!-- For QA purposes only it should be removed -->
           <HandleAccessibleChannelCard :contentNode="rootNodes" />
         </div>
 

From 8d12cdc4e8d5fc057a5526705a693cf6ff8cb686 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 14 Oct 2024 14:32:29 +0300
Subject: [PATCH 12/14] clean up the QA code

---
 .../HandleAccessibleChannelCard.vue           | 53 -------------------
 .../assets/src/views/LibraryPage/index.vue    |  4 --
 2 files changed, 57 deletions(-)
 delete mode 100644 kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
deleted file mode 100644
index f3550491fdd..00000000000
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/HandleAccessibleChannelCard.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-
-  <div>
-    <h2>Accessible Channel Card</h2>
-    <KGrid>
-      <KGridItem
-        v-for="device in contentNode"
-        :key="device.id"
-        :layout="{ span: layoutSpan }"
-      >
-        <AccessibleChannelCard
-          :to="genContentLinkBackLinkCurrentPage(device.id, false, null)"
-          :contentNode="device"
-          :title="device.title"
-          :headingLevel="2"
-          :thumbnailSrc="device.thumbnail"
-          :style="{ marginBottom: '24px' }"
-        />
-      </KGridItem>
-    </KGrid>
-  </div>
-
-</template>
-
-
-<script>
-
-  import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard';
-  import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
-  import useContentLink from '../../composables/useContentLink';
-
-  export default {
-    name: 'HandleAccessibleChannelCard',
-    components: {
-      AccessibleChannelCard,
-    },
-    setup() {
-      const { layoutSpan } = useCardLayoutSpan();
-      const { genContentLinkBackLinkCurrentPage } = useContentLink();
-      return {
-        layoutSpan,
-        genContentLinkBackLinkCurrentPage,
-      };
-    },
-    props: {
-      contentNode: {
-        type: Array,
-        required: true,
-      },
-    },
-  };
-
-</script>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index dbf39aa8197..0d876c0e62b 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -81,8 +81,6 @@
             data-test="other-libraries"
             :injectedtr="injecttr"
           />
-          <!-- For QA purposes only it should be removed -->
-          <HandleAccessibleChannelCard :contentNode="rootNodes" />
         </div>
 
         <SearchResultsGrid
@@ -199,7 +197,6 @@
   import useChannels from './../../composables/useChannels';
   import ResumableContentGrid from './ResumableContentGrid';
   import OtherLibraries from './OtherLibraries';
-  import HandleAccessibleChannelCard from './HandleAccessibleChannelCard.vue';
 
   const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
@@ -222,7 +219,6 @@
       LearnAppBarPage,
       OtherLibraries,
       PostSetupModalGroup,
-      HandleAccessibleChannelCard,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {

From 451b8573320bf5ba6cb0174bdfd2bb2fa4d87687 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 15 Oct 2024 23:17:28 +0300
Subject: [PATCH 13/14] adds string pluralisation

---
 .../components/Cards/AccessibleChannelCard.vue      | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
index 92cdc4d0e57..a060ddf03d8 100644
--- a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
@@ -21,7 +21,7 @@
     <template #belowTitle>
       <div>
         <KTextTruncator
-          :text="numberOfResources"
+          :text="coachString('numberOfResources',{ value: contentNode.num_coach_contents })"
           :maxLines="1"
         />
         <KTextTruncator
@@ -38,15 +38,15 @@
 <script>
 
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import commonCoach from './../../../../kolibri/plugins/coach/assets/src/views/common';
 
   export default {
     name: 'AccessibleChannelCard',
     components: {
       ContentIcon,
     },
-    mixins: [commonCoreStrings],
+    mixins: [commonCoach],
     setup() {
       const { windowBreakpoint } = useKResponsiveWindow();
       return {
@@ -70,17 +70,12 @@
       contentNode: {
         type: Object,
         required: true,
-      },
+      }, 
       thumbnailSrc: {
         type: String,
         default: null,
       },
     },
-    computed: {
-      numberOfResources() {
-        return `${this.contentNode.num_coach_contents} ${this.coreString('resourcesLabel')}`;
-      },
-    },
   };
 
 </script>

From dc316ed8a684a1bc4ed3c793835ca7f35b819a6d Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 15 Oct 2024 23:33:03 +0300
Subject: [PATCH 14/14] rebase

---
 .../components/Cards/AccessibleChannelCard.vue       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
index a060ddf03d8..0c8f8e8d681 100644
--- a/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleChannelCard.vue
@@ -2,7 +2,7 @@
 
   <KCard
     :to="to"
-    :layout="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
+    :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
     thumbnailDisplay="small"
     thumbnailAlign="right"
     :thumbnailSrc="thumbnailSrc"
@@ -21,7 +21,7 @@
     <template #belowTitle>
       <div>
         <KTextTruncator
-          :text="coachString('numberOfResources',{ value: contentNode.num_coach_contents })"
+          :text="coachString('numberOfResources', { value: contentNode.num_coach_contents })"
           :maxLines="1"
         />
         <KTextTruncator
@@ -70,7 +70,7 @@
       contentNode: {
         type: Object,
         required: true,
-      }, 
+      },
       thumbnailSrc: {
         type: String,
         default: null,
@@ -83,9 +83,9 @@
 
 <style scoped>
 
-  .type-icon{
+  .type-icon {
+    right: 10px;
     font-size: 3em;
-    right:10px;
   }
 
-</style>
\ No newline at end of file
+</style>