From f8933fbee8c6fb3201854545b058c06fc88eb2b5 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Mon, 29 Jul 2024 17:37:43 +0530
Subject: [PATCH 01/65] trial for usecase 1

---
 .../src/views/ManageClassPage/index.vue       | 145 ++++++++----------
 1 file changed, 66 insertions(+), 79 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index a86452c30f2..a85e3046f64 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -7,7 +7,7 @@
           v-if="userIsMultiFacilityAdmin"
           :to="{
             name: facilityPageLinks.AllFacilitiesPage.name,
-            params: { subtopicName: 'ManageClassPage' },
+            params: { subtopicName: 'ManageClassPage' }
           }"
           icon="back"
           :text="coreString('changeLearningFacility')"
@@ -35,70 +35,51 @@
         </KGridItem>
       </KGrid>
 
-      <CoreTable
-        :dataLoading="dataLoading"
-        :emptyMessage="$tr('noClassesExist')"
+      <KTable
+        :headers="tableHeaders"
+        :rows="tableRows"
+        :caption="$tr('tableCaption')"
+        :useLocalSorting="true"
       >
-        <caption class="visuallyhidden">
-          {{
-            $tr('tableCaption')
-          }}
-        </caption>
-        <template #headers>
-          <th>{{ coreString('classNameLabel') }}</th>
-          <th>{{ coreString('coachesLabel') }}</th>
-          <th>{{ coreString('learnersLabel') }}</th>
-          <th>
-            <span class="visuallyhidden">
-              {{ coreString('userActionsColumnHeader') }}
-            </span>
-          </th>
+        <template #header="{ header }">
+          {{ header.label }}
         </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="classroom in sortedClassrooms"
-              :key="classroom.id"
+        <template #cell="{ content, rowIndex, colIndex }">
+          <span v-if="colIndex === 0">
+            <KRouterLink
+              :text="content"
+              :to="$store.getters.facilityPageLinks.ClassEditPage(tableRows[rowIndex][3].id)"
+              icon="classes"
+            />
+          </span>
+          <span v-else-if="colIndex === 1">
+            <KOptionalText
+              :text="coachNames(tableRows[rowIndex][3]).length ? 
+                formattedCoachNames(tableRows[rowIndex][3]) : ''"
+            />
+            <KTooltip
+              v-if="formattedCoachNamesTooltip(tableRows[rowIndex][3])"
+              :reference="`coachNames${tableRows[rowIndex][3].id}`"
+              :refs="$refs"
             >
-              <td>
-                <KRouterLink
-                  :text="classroom.name"
-                  :to="$store.getters.facilityPageLinks.ClassEditPage(classroom.id)"
-                  icon="classes"
-                />
-              </td>
-              <td>
-                <span :ref="`coachNames${classroom.id}`">
-                  <KOptionalText
-                    :text="coachNames(classroom).length ? formattedCoachNames(classroom) : ''"
-                  />
-                </span>
-                <KTooltip
-                  v-if="formattedCoachNamesTooltip(classroom)"
-                  :reference="`coachNames${classroom.id}`"
-                  :refs="$refs"
-                >
-                  {{ formattedCoachNamesTooltip(classroom) }}
-                </KTooltip>
-              </td>
-
-              <td>
-                {{ $formatNumber(classroom.learner_count) }}
-              </td>
-              <td class="core-table-button-col">
-                <KButton
-                  appearance="flat-button"
-                  :text="$tr('deleteClass')"
-                  @click="selectClassToDelete(classroom)"
-                />
-              </td>
-            </tr>
-          </transition-group>
+              {{ formattedCoachNamesTooltip(tableRows[rowIndex][3]) }}
+            </KTooltip>
+          </span> 
+          <span v-else-if="colIndex === 2">
+            {{ content }}
+          </span>
+          <span
+            v-else-if="colIndex === 3"
+            class="core-table-button-col"
+          >
+            <KButton
+              appearance="flat-button"
+              :text="$tr('deleteClass')"
+              @click="selectClassToDelete(tableRows[rowIndex][3])"
+            />
+          </span>
         </template>
-      </CoreTable>
+      </KTable>
 
       <ClassDeleteModal
         v-if="Boolean(classToDelete)"
@@ -108,7 +89,7 @@
       />
       <ClassCreateModal
         v-if="modalShown === Modals.CREATE_CLASS"
-        :classes="sortedClassrooms"
+        :classes="classes"
         @cancel="closeModal"
         @success="handleCreateSuccess()"
       />
@@ -121,8 +102,6 @@
 <script>
 
   import { mapState, mapActions, mapGetters } from 'vuex';
-  import CoreTable from 'kolibri.coreVue.components.CoreTable';
-  import orderBy from 'lodash/orderBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { Modals } from '../../constants';
   import FacilityAppBarPage from '../FacilityAppBarPage';
@@ -139,7 +118,6 @@
     },
     components: {
       FacilityAppBarPage,
-      CoreTable,
       ClassCreateModal,
       ClassDeleteModal,
     },
@@ -153,11 +131,24 @@
       };
     },
     computed: {
-      ...mapState('classManagement', ['modalShown', 'classes', 'dataLoading']),
+      ...mapState('classManagement', ['modalShown', 'classes']),
       ...mapGetters(['userIsMultiFacilityAdmin', 'facilityPageLinks']),
       Modals: () => Modals,
-      sortedClassrooms() {
-        return orderBy(this.classes, [classroom => classroom.name.toUpperCase()], ['asc']);
+      tableHeaders() {
+        return [
+          { label: this.coreString('classNameLabel'), dataType: 'string',minWidth: '150px', width: '20%'  },
+          { label: this.coreString('coachesLabel'), dataType: 'others',minWidth: '150px', width: '30%'  },
+          { label: this.coreString('learnersLabel'), dataType: 'numeric' ,minWidth: '150px', width: '20%' },
+          { label: '', dataType: 'others',minWidth: '150px', width: '30%'  },
+        ];
+      },
+      tableRows() {
+        return this.classes.map(classroom => [
+          classroom.name,
+          this.formattedCoachNames(classroom),
+          this.$formatNumber(classroom.learner_count),
+          classroom,
+        ]);
       },
     },
     methods: {
@@ -180,12 +171,13 @@
         }
       },
       // Duplicated in class-list-page
-      coachNames(classroom) {
-        const { coaches } = classroom;
+      coachNames(classes) {
+        const { coaches } = classes;
         return coaches.map(({ full_name }) => full_name);
       },
       formattedCoachNames(classroom) {
         const coach_names = this.coachNames(classroom);
+       
         if (coach_names.length === 1) {
           return coach_names[0];
         }
@@ -234,11 +226,6 @@
         message: '{name1}, {name2}… (+{numRemaining, number})',
         context: 'DO NOT TRANSLATE\nCopy the source string.',
       },
-      noClassesExist: {
-        message: 'No classes exist',
-        context:
-          'Message that displays when there are no classes created in the Facility > Classes section.',
-      },
     },
   };
 
@@ -247,9 +234,9 @@
 
 <style lang="scss" scoped>
 
-  .move-down {
-    position: relative;
-    margin-top: 24px;
-  }
+.move-down {
+  position: relative;
+  margin-top: 24px;
+}
 
 </style>

From ae8d3ae455937fbbd614b919400771792abfe403 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 18 Aug 2024 15:37:15 +0530
Subject: [PATCH 02/65] Linked with KDS

---
 kolibri/core/package.json                     |  2 +-
 .../src/views/ManageClassPage/index.vue       | 50 +++++++++++++------
 packages/kolibri-core-for-export/package.json |  2 +-
 yarn.lock                                     | 10 ++--
 4 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index ff021a95ba7..2bd8c65472e 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "4.3.2",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index a85e3046f64..0c4f1b94db0 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -7,7 +7,7 @@
           v-if="userIsMultiFacilityAdmin"
           :to="{
             name: facilityPageLinks.AllFacilitiesPage.name,
-            params: { subtopicName: 'ManageClassPage' }
+            params: { subtopicName: 'ManageClassPage' },
           }"
           icon="back"
           :text="coreString('changeLearningFacility')"
@@ -44,18 +44,21 @@
         <template #header="{ header }">
           {{ header.label }}
         </template>
-        <template #cell="{ content, rowIndex, colIndex }">
+        <template #cell="{ content, rowIndex, colIndex, row }">
           <span v-if="colIndex === 0">
             <KRouterLink
               :text="content"
-              :to="$store.getters.facilityPageLinks.ClassEditPage(tableRows[rowIndex][3].id)"
+              :to="$store.getters.facilityPageLinks.ClassEditPage(row[3].id)"
               icon="classes"
             />
           </span>
           <span v-else-if="colIndex === 1">
             <KOptionalText
-              :text="coachNames(tableRows[rowIndex][3]).length ? 
-                formattedCoachNames(tableRows[rowIndex][3]) : ''"
+              :text="
+                coachNames(tableRows[rowIndex][3]).length
+                  ? formattedCoachNames(tableRows[rowIndex][3])
+                  : ''
+              "
             />
             <KTooltip
               v-if="formattedCoachNamesTooltip(tableRows[rowIndex][3])"
@@ -64,7 +67,7 @@
             >
               {{ formattedCoachNamesTooltip(tableRows[rowIndex][3]) }}
             </KTooltip>
-          </span> 
+          </span>
           <span v-else-if="colIndex === 2">
             {{ content }}
           </span>
@@ -75,7 +78,7 @@
             <KButton
               appearance="flat-button"
               :text="$tr('deleteClass')"
-              @click="selectClassToDelete(tableRows[rowIndex][3])"
+              @click="selectClassToDelete(row[3])"
             />
           </span>
         </template>
@@ -136,10 +139,25 @@
       Modals: () => Modals,
       tableHeaders() {
         return [
-          { label: this.coreString('classNameLabel'), dataType: 'string',minWidth: '150px', width: '20%'  },
-          { label: this.coreString('coachesLabel'), dataType: 'others',minWidth: '150px', width: '30%'  },
-          { label: this.coreString('learnersLabel'), dataType: 'numeric' ,minWidth: '150px', width: '20%' },
-          { label: '', dataType: 'others',minWidth: '150px', width: '30%'  },
+          {
+            label: this.coreString('classNameLabel'),
+            dataType: 'string',
+            minWidth: '150px',
+            width: '20%',
+          },
+          {
+            label: this.coreString('coachesLabel'),
+            dataType: 'others',
+            minWidth: '150px',
+            width: '30%',
+          },
+          {
+            label: this.coreString('learnersLabel'),
+            dataType: 'numeric',
+            minWidth: '150px',
+            width: '20%',
+          },
+          { label: '', dataType: 'others', minWidth: '150px', width: '30%' },
         ];
       },
       tableRows() {
@@ -177,7 +195,7 @@
       },
       formattedCoachNames(classroom) {
         const coach_names = this.coachNames(classroom);
-       
+
         if (coach_names.length === 1) {
           return coach_names[0];
         }
@@ -234,9 +252,9 @@
 
 <style lang="scss" scoped>
 
-.move-down {
-  position: relative;
-  margin-top: 24px;
-}
+  .move-down {
+    position: relative;
+    margin-top: 24px;
+  }
 
 </style>
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index a87966f634c..cbf3ead8424 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "4.3.2",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index 05a162dc8d6..8a467348d50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7648,10 +7648,9 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-kolibri-design-system@4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.3.2.tgz#1779fb5958499bd0cb1a65591a5ec8a82e0a2248"
-  integrity sha512-hsApuzPGAYxkQpcVlVLcY4GSgZAyrOzLLt+CQGj9XM1Lep99kiJuLysyNP0ZxRzmT/kKjx4jvIA8Mi81Ui5pkw==
+"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a":
+  version "5.0.0-rc1"
+  resolved "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a"
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -7665,6 +7664,7 @@ kolibri-design-system@4.3.2:
     purecss "2.2.0"
     tippy.js "4.2.1"
     vue-intl "3.1.0"
+    vue2-teleport "1.1.4"
     xstate "4.38.3"
 
 launch-editor-middleware@^2.8.0:
@@ -11596,7 +11596,7 @@ vue-virtual-scroller@1.1.2:
     vue-observe-visibility "^0.4.4"
     vue-resize "^0.4.5"
 
-vue2-teleport@^1.1.4:
+vue2-teleport@1.1.4, vue2-teleport@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
   integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==

From f6dc5e05e79cd80910427f4410e05edeb27b9d04 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 22 Aug 2024 15:27:30 +0530
Subject: [PATCH 03/65] fixed issue

---
 .../assets/src/views/ManageClassPage/index.vue       | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 0c4f1b94db0..0be74a2dff3 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -53,19 +53,13 @@
             />
           </span>
           <span v-else-if="colIndex === 1">
-            <KOptionalText
-              :text="
-                coachNames(tableRows[rowIndex][3]).length
-                  ? formattedCoachNames(tableRows[rowIndex][3])
-                  : ''
-              "
-            />
+            <KOptionalText :text="coachNames(row[3]).length ? formattedCoachNames(row[3]) : ''" />
             <KTooltip
               v-if="formattedCoachNamesTooltip(tableRows[rowIndex][3])"
-              :reference="`coachNames${tableRows[rowIndex][3].id}`"
+              :reference="`coachNames${row[3].id}`"
               :refs="$refs"
             >
-              {{ formattedCoachNamesTooltip(tableRows[rowIndex][3]) }}
+              {{ formattedCoachNamesTooltip(row[3]) }}
             </KTooltip>
           </span>
           <span v-else-if="colIndex === 2">

From 2f09330d6ee23a24423f50f0d74b54861722db63 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 06:19:32 +0000
Subject: [PATCH 04/65] Add BabyElias to AUTHORS.md

---
 AUTHORS.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/AUTHORS.md b/AUTHORS.md
index d8332e530b0..fde1739a4ba 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -104,3 +104,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Mazen Oweiss | moweiss |
 | Eshaan Aggarwal | EshaanAgg |
 | Nikhil Sharma | ThEditor |
+| - | BabyElias |

From 0479c7a699d7c64f58ebd8bd7c7de3d2bd84a9f6 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:28:42 +0000
Subject: [PATCH 05/65] [pre-commit.ci lite] apply automatic fixes

---
 .../plugins/facility/assets/src/views/ManageClassPage/index.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 27ed191fe81..6036afc4db2 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -131,7 +131,6 @@
       };
     },
     computed: {
-
       ...mapState('classManagement', ['modalShown', 'classes']),
       ...mapGetters(['facilityPageLinks']),
 

From a003f2d6f435b62cbd7bebdd8bb44368eb51f957 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 29 Aug 2024 14:33:54 +0530
Subject: [PATCH 06/65] added emptymessage and updated kds

---
 kolibri/core/package.json                     |  2 +-
 .../src/views/ManageClassPage/index.vue       | 19 +++++--
 packages/kolibri-core-for-export/package.json |  3 +-
 yarn.lock                                     | 54 ++++++++++++-------
 4 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 96f7382a10e..2506aa708b7 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197",
 
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 6036afc4db2..998ad2dded1 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -39,10 +39,11 @@
         :headers="tableHeaders"
         :rows="tableRows"
         :caption="$tr('tableCaption')"
-        :useLocalSorting="true"
+        :emptyMessage="$tr('noClassesExist')"
+        sortable
       >
-        <template #header="{ header }">
-          {{ header.label }}
+        <template #header="{ header, index }">
+          <span :class="{ visuallyhidden: index === 3 }">{{ header.label }}</span>
         </template>
         <template #cell="{ content, rowIndex, colIndex, row }">
           <span v-if="colIndex === 0">
@@ -155,7 +156,12 @@
             minWidth: '150px',
             width: '20%',
           },
-          { label: '', dataType: 'others', minWidth: '150px', width: '30%' },
+          {
+            label: this.coreString('userActionsColumnHeader'),
+            dataType: 'others',
+            minWidth: '150px',
+            width: '30%',
+          },
         ];
       },
       tableRows() {
@@ -242,6 +248,11 @@
         message: '{name1}, {name2}… (+{numRemaining, number})',
         context: 'DO NOT TRANSLATE\nCopy the source string.',
       },
+      noClassesExist: {
+        message: 'No classes exist',
+        context:
+          'Message that displays when there are no classes created in the Facility > Classes section.',
+      },
     },
   };
 
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index b16372acca6..6266d427d74 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,8 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
-
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index 2d1ea6bbd3b..dfd9d00ff9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2972,15 +2972,6 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
-  version "2.2.3"
-  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^4.0.2"
-    string-hash "^1.1.3"
-
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -3810,7 +3801,7 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
   integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -3829,16 +3820,32 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.6.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
 colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -6656,6 +6663,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -7668,14 +7680,14 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a":
-  version "5.0.0-rc1"
-  resolved "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a"
-
+"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197":
+  version "5.0.0-rc3"
+  resolved "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197"
   dependencies:
     "@vue/composition-api" "1.7.2"
-    aphrodite "git+https://github.com/learningequality/aphrodite.git"
+    aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"
+    color "3.2.1"
     css-element-queries "1.2.0"
     date-fns "1.30.1"
     frame-throttle "3.0.0"
@@ -10291,6 +10303,13 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -11607,8 +11626,7 @@ vue-virtual-scroller@1.1.2:
     vue-observe-visibility "^0.4.4"
     vue-resize "^0.4.5"
 
-
-vue2-teleport@1.1.4, vue2-teleport@^1.1.4:
+vue2-teleport@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
   integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==

From 413349fdebb1773ed570afad756c7b4635119053 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 1 Sep 2024 22:51:37 +0530
Subject: [PATCH 07/65] minor fix

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

diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 998ad2dded1..8732806d13b 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -56,7 +56,7 @@
           <span v-else-if="colIndex === 1">
             <KOptionalText :text="coachNames(row[3]).length ? formattedCoachNames(row[3]) : ''" />
             <KTooltip
-              v-if="formattedCoachNamesTooltip(tableRows[rowIndex][3])"
+              v-if="formattedCoachNamesTooltip(row[3])"
               :reference="`coachNames${row[3].id}`"
               :refs="$refs"
             >

From 802703f24f680c0d0d097655307d67246ecc76ef Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 1 Sep 2024 23:06:56 +0530
Subject: [PATCH 08/65] added dataLoading and updated KDS

---
 kolibri/core/package.json                                     | 2 +-
 .../facility/assets/src/views/ManageClassPage/index.vue       | 3 ++-
 packages/kolibri-core-for-export/package.json                 | 2 +-
 yarn.lock                                                     | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 2506aa708b7..81bc7f3f109 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0",
 
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 8732806d13b..31984bcfda2 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -40,6 +40,7 @@
         :rows="tableRows"
         :caption="$tr('tableCaption')"
         :emptyMessage="$tr('noClassesExist')"
+        :dataLoading="dataLoading"
         sortable
       >
         <template #header="{ header, index }">
@@ -132,7 +133,7 @@
       };
     },
     computed: {
-      ...mapState('classManagement', ['modalShown', 'classes']),
+      ...mapState('classManagement', ['modalShown', 'classes', 'dataLoading']),
       ...mapGetters(['facilityPageLinks']),
 
       Modals: () => Modals,
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 6266d427d74..4e4c5ee7a16 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index dfd9d00ff9c..224f28954c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7680,9 +7680,9 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197":
+"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0":
   version "5.0.0-rc3"
-  resolved "https://github.com/BabyElias/kolibri-design-system#8071b67fd8821bff00d90a5beecbf470eb39a197"
+  resolved "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0"
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 25af6e848dc0d6f536a4d08f17757d14de0dda0d Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Thu, 5 Sep 2024 05:17:53 +0530
Subject: [PATCH 09/65] issue #12626

---
 .bas_hprofile                                 |   0
 .bash_profile                                 |   0
 .../assets/src/views/NotificationsRoot.vue    | 275 ++++++++++--------
 3 files changed, 152 insertions(+), 123 deletions(-)
 create mode 100644 .bas_hprofile
 create mode 100644 .bash_profile

diff --git a/.bas_hprofile b/.bas_hprofile
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/.bash_profile b/.bash_profile
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 6cd1cbe415b..0a856dd6e8c 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -3,11 +3,8 @@
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
-        <AuthMessage
-          :authorizedRole="authorizedRole"
-          :header="authorizationErrorHeader"
-          :details="authorizationErrorDetails"
-        />
+        <AuthMessage :authorizedRole="authorizedRole" :header="authorizationErrorHeader"
+          :details="authorizationErrorDetails" />
       </KPageContainer>
     </AppBarPage>
 
@@ -17,24 +14,15 @@
       </KPageContainer>
     </AppBarPage>
 
-    <div
-      v-else
-      tabindex="-1"
-      data-test="base-page"
-    >
+    <div v-else tabindex="-1" data-test="base-page">
       <slot :loading="loading"></slot>
     </div>
 
     <GlobalSnackbar />
-    <UpdateNotification
-      v-if="!loading && showNotification && mostRecentNotification"
-      :id="mostRecentNotification.id"
-      :title="mostRecentNotification.title"
-      :msg="mostRecentNotification.msg"
-      :linkText="mostRecentNotification.linkText"
-      :linkUrl="mostRecentNotification.linkUrl"
-      @submit="dismissUpdateModal"
-    />
+    <UpdateNotification v-if="!loading && showNotification && mostRecentNotification" :id="mostRecentNotification.id"
+      :title="mostRecentNotification.title" :msg="mostRecentNotification.msg"
+      :linkText="mostRecentNotification.linkText" :linkUrl="mostRecentNotification.linkUrl"
+      @submit="dismissUpdateModal" />
   </div>
 
 </template>
@@ -42,120 +30,161 @@
 
 <script>
 
-  import { mapState } from 'vuex';
-  import Lockr from 'lockr';
-  import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
-  import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
-  import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-  import AppError from 'kolibri-common/components/AppError';
-  import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
-  import useUser from 'kolibri.coreVue.composables.useUser';
-  import UpdateNotification from './UpdateNotification.vue';
+import { mapState } from 'vuex';
+import Lockr from 'lockr';
+import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
+import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
+import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
+import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+import AppError from 'kolibri-common/components/AppError';
+import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
+import useUser from 'kolibri.coreVue.composables.useUser';
+import UpdateNotification from './UpdateNotification.vue';
 
-  export default {
-    name: 'NotificationsRoot',
-    components: {
-      AppBarPage,
-      AppError,
-      AuthMessage,
-      GlobalSnackbar,
-      UpdateNotification,
-    },
-    setup() {
-      const { isAdmin, isSuperuser } = useUser();
+export default {
+  name: 'NotificationsRoot',
+  components: {
+    AppBarPage,
+    AppError,
+    AuthMessage,
+    GlobalSnackbar,
+    UpdateNotification,
+  },
+  setup() {
+    const { isAdmin, isSuperuser } = useUser();
 
-      return {
-        isAdmin,
-        isSuperuser,
-      };
+    return {
+      isAdmin,
+      isSuperuser,
+    };
+  },
+  props: {
+    authorized: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    authorizedRole: {
+      type: String,
+      default: null,
+    },
+    authorizationErrorHeader: {
+      type: String,
+      default: null,
     },
-    props: {
-      authorized: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      authorizedRole: {
-        type: String,
-        default: null,
-      },
-      authorizationErrorHeader: {
-        type: String,
-        default: null,
-      },
-      authorizationErrorDetails: {
-        type: String,
-        default: null,
-      },
-      loading: {
-        type: Boolean,
-        default: null,
-      },
+    authorizationErrorDetails: {
+      type: String,
+      default: null,
     },
-    data() {
-      return {
-        notificationModalShown: true,
-      };
+    loading: {
+      type: Boolean,
+      default: null,
     },
-    computed: {
-      ...mapState({
-        error: state => state.core.error,
-        notifications: state => state.core.notifications,
-      }),
-      notAuthorized() {
-        // catch "not authorized" error, display AuthMessage
-        if (
-          this.error &&
-          this.error.response &&
-          this.error.response.status &&
-          this.error.response.status == 403
-        ) {
-          return true;
+  },
+  data() {
+    return {
+      notifications: [],
+      notificationModalShown: true,
+    };
+  },
+  computed: {
+    notAuthorized() {
+      // catch "not authorized" error, display AuthMessage
+      if (
+        this.error &&
+        this.error.response &&
+        this.error.response.status &&
+        this.error.response.status == 403
+      ) {
+        return true;
+      }
+      return !this.authorized;
+    },
+    showNotification() {
+      if (
+        (this.isAdmin || this.isSuperuser) &&
+        !Lockr.get(UPDATE_MODAL_DISMISSED) &&
+        this.notificationModalShown &&
+        this.notifications.length !== 0
+      ) {
+        return true;
+      }
+      return false;
+    },
+    mostRecentNotification() {
+      let languageCode = defaultLanguage.id;
+      // notifications should already be ordered by timestamp
+      const notification = this.notifications[0];
+      if (notification) {
+        // check if translated message is available for current language
+        if (notification.i18n[currentLanguage] !== undefined) {
+          languageCode = currentLanguage;
         }
-        return !this.authorized;
-      },
-      showNotification() {
-        if (
-          (this.isAdmin || this.isSuperuser) &&
-          !Lockr.get(UPDATE_MODAL_DISMISSED) &&
-          this.notificationModalShown &&
-          this.notifications.length !== 0
-        ) {
-          return true;
+        // i18n data structure generated by nutritionfacts_i18n.py
+        return {
+          id: notification.id,
+          title: notification.i18n[languageCode].title,
+          msg: notification.i18n[languageCode].msg,
+          linkText: notification.i18n[languageCode].link_text,
+          linkUrl: notification.link_url,
+        };
+      }
+      return null;
+    },
+  },
+  methods: {
+    async getNotifications() {
+      const { isAdmin, isSuperuser } = useUser();
+      if (isAdmin || isSuperuser) {
+        try {
+          const notifications = await PingbackNotificationResource.fetchCollection();
+          this.notifications = _notificationListState(notifications);
+        } catch (error) {
+          this.dispatchError(error);
         }
-        return false;
-      },
-      mostRecentNotification() {
-        let languageCode = defaultLanguage.id;
-        // notifications should already be ordered by timestamp
-        const notification = this.notifications[0];
-        if (notification) {
-          // check if translated message is available for current language
-          if (notification.i18n[currentLanguage] !== undefined) {
-            languageCode = currentLanguage;
+      }
+    },
+    async saveDismissedNotification(notificationId) {
+      const { user_id } = useUser();
+      try {
+        await PingbackNotificationDismissedResource.saveModel({
+          data: {
+            user: user_id,
+            notification: notificationId,
           }
-          // i18n data structure generated by nutritionfacts_i18n.py
-          return {
-            id: notification.id,
-            title: notification.i18n[languageCode].title,
-            msg: notification.i18n[languageCode].msg,
-            linkText: notification.i18n[languageCode].link_text,
-            linkUrl: notification.link_url,
-          };
-        }
-        return null;
-      },
+        });
+        this.removeNotification(notificationId);
+      } catch (error) {
+        this.dispatchError(error);
+      }
     },
-    methods: {
-      dismissUpdateModal() {
-        if (this.notifications.length === 0) {
-          this.notificationModalShown = false;
-          Lockr.set(UPDATE_MODAL_DISMISSED, true);
-        }
-      },
+    dismissUpdateModal() {
+      if (this.notifications.length === 0) {
+        this.notificationModalShown = false;
+        Lockr.set(UPDATE_MODAL_DISMISSED, true);
+      }
     },
-  };
+    dispatchError(error) {
+      this.$store.dispatch('handleApiError', { error });
+    },
+    removeNotification(notificationId) {
+      this.notifications = this.notifications.filter(n => n.id !== notificationId);
+    },
+  },
+  created() {
+    this.getNotifications();
+  },
+};
+
+function _notificationListState(data) {
+  return data.map(notification => ({
+    id: notification.id,
+    version_range: notification.version_range,
+    timestamp: notification.timestamp,
+    link_url: notification.link_url,
+    i18n: notification.i18n,
+  }));
+}
 
 </script>
 

From c0ea5655b3b3416c2b1679d2be826c88884abfd0 Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Fri, 6 Sep 2024 00:28:14 +0530
Subject: [PATCH 10/65] removed vuex mutations

---
 kolibri/core/assets/src/kolibri_app.js        |  1 -
 .../assets/src/state/modules/core/actions.js  | 28 -------------------
 kolibri/core/assets/test/kolibri_app.spec.js  |  1 -
 3 files changed, 30 deletions(-)

diff --git a/kolibri/core/assets/src/kolibri_app.js b/kolibri/core/assets/src/kolibri_app.js
index 70ec3c7eb17..1cb45ab1e65 100644
--- a/kolibri/core/assets/src/kolibri_app.js
+++ b/kolibri/core/assets/src/kolibri_app.js
@@ -104,7 +104,6 @@ export default class KolibriApp extends KolibriModule {
   ready() {
     this.setupVue();
     return heartbeat.startPolling().then(() => {
-      this.store.dispatch('getNotifications');
       return Promise.all([
         // Invoke each of the state setters before initializing the app.
         ...this.stateSetters.map(setter => setter(this.store)),
diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index e8588008173..c5aeeb74bb3 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -179,35 +179,7 @@ export function setPageVisibility(store) {
   _setPageVisibility(store, document.visibilityState === 'visible');
 }
 
-export function getNotifications(store) {
-  const { isAdmin, isSuperuser } = useUser();
-  if (get(isAdmin) || get(isSuperuser)) {
-    return PingbackNotificationResource.fetchCollection()
-      .then(notifications => {
-        logging.info('Notifications set.');
-        store.commit('CORE_SET_NOTIFICATIONS', _notificationListState(notifications));
-      })
-      .catch(error => {
-        store.dispatch('handleApiError', { error });
-      });
-  }
-  return Promise.resolve();
-}
 
-export function saveDismissedNotification(store, notification_id) {
-  const { user_id } = useUser();
-  const dismissedNotificationData = {
-    user: get(user_id),
-    notification: notification_id,
-  };
-  return PingbackNotificationDismissedResource.saveModel({ data: dismissedNotificationData })
-    .then(() => {
-      store.commit('CORE_REMOVE_NOTIFICATION', notification_id);
-    })
-    .catch(error => {
-      store.dispatch('handleApiError', { error });
-    });
-}
 
 export function getFacilities(store) {
   return FacilityResource.fetchCollection({ force: true }).then(facilities => {
diff --git a/kolibri/core/assets/test/kolibri_app.spec.js b/kolibri/core/assets/test/kolibri_app.spec.js
index 7bd1af62ec4..dcfad872703 100644
--- a/kolibri/core/assets/test/kolibri_app.spec.js
+++ b/kolibri/core/assets/test/kolibri_app.spec.js
@@ -58,7 +58,6 @@ describe('KolibriApp', function () {
         core: {
           actions: {
             getCurrentSession: jest.fn().mockResolvedValue(),
-            getNotifications: jest.fn().mockResolvedValue(),
           },
         },
       },

From 90113523576c04e585d54d41e8c8224e20dc3c14 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, 5 Sep 2024 22:08:36 +0000
Subject: [PATCH 11/65] [pre-commit.ci lite] apply automatic fixes

---
 .../assets/src/state/modules/core/actions.js  |   2 -
 .../assets/src/views/NotificationsRoot.vue    | 308 +++++++++---------
 2 files changed, 160 insertions(+), 150 deletions(-)

diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index c5aeeb74bb3..c3c72fa05e2 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -179,8 +179,6 @@ export function setPageVisibility(store) {
   _setPageVisibility(store, document.visibilityState === 'visible');
 }
 
-
-
 export function getFacilities(store) {
   return FacilityResource.fetchCollection({ force: true }).then(facilities => {
     store.commit('CORE_SET_FACILITIES', [...facilities]);
diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 0a856dd6e8c..b30b8720181 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -3,8 +3,11 @@
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
-        <AuthMessage :authorizedRole="authorizedRole" :header="authorizationErrorHeader"
-          :details="authorizationErrorDetails" />
+        <AuthMessage
+          :authorizedRole="authorizedRole"
+          :header="authorizationErrorHeader"
+          :details="authorizationErrorDetails"
+        />
       </KPageContainer>
     </AppBarPage>
 
@@ -14,15 +17,24 @@
       </KPageContainer>
     </AppBarPage>
 
-    <div v-else tabindex="-1" data-test="base-page">
+    <div
+      v-else
+      tabindex="-1"
+      data-test="base-page"
+    >
       <slot :loading="loading"></slot>
     </div>
 
     <GlobalSnackbar />
-    <UpdateNotification v-if="!loading && showNotification && mostRecentNotification" :id="mostRecentNotification.id"
-      :title="mostRecentNotification.title" :msg="mostRecentNotification.msg"
-      :linkText="mostRecentNotification.linkText" :linkUrl="mostRecentNotification.linkUrl"
-      @submit="dismissUpdateModal" />
+    <UpdateNotification
+      v-if="!loading && showNotification && mostRecentNotification"
+      :id="mostRecentNotification.id"
+      :title="mostRecentNotification.title"
+      :msg="mostRecentNotification.msg"
+      :linkText="mostRecentNotification.linkText"
+      :linkUrl="mostRecentNotification.linkUrl"
+      @submit="dismissUpdateModal"
+    />
   </div>
 
 </template>
@@ -30,161 +42,161 @@
 
 <script>
 
-import { mapState } from 'vuex';
-import Lockr from 'lockr';
-import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
-import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
-import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
-import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-import AppError from 'kolibri-common/components/AppError';
-import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
-import useUser from 'kolibri.coreVue.composables.useUser';
-import UpdateNotification from './UpdateNotification.vue';
+  import { mapState } from 'vuex';
+  import Lockr from 'lockr';
+  import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
+  import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
+  import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
+  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+  import AppError from 'kolibri-common/components/AppError';
+  import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
+  import useUser from 'kolibri.coreVue.composables.useUser';
+  import UpdateNotification from './UpdateNotification.vue';
 
-export default {
-  name: 'NotificationsRoot',
-  components: {
-    AppBarPage,
-    AppError,
-    AuthMessage,
-    GlobalSnackbar,
-    UpdateNotification,
-  },
-  setup() {
-    const { isAdmin, isSuperuser } = useUser();
-
-    return {
-      isAdmin,
-      isSuperuser,
-    };
-  },
-  props: {
-    authorized: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    authorizedRole: {
-      type: String,
-      default: null,
+  export default {
+    name: 'NotificationsRoot',
+    components: {
+      AppBarPage,
+      AppError,
+      AuthMessage,
+      GlobalSnackbar,
+      UpdateNotification,
     },
-    authorizationErrorHeader: {
-      type: String,
-      default: null,
+    setup() {
+      const { isAdmin, isSuperuser } = useUser();
+
+      return {
+        isAdmin,
+        isSuperuser,
+      };
     },
-    authorizationErrorDetails: {
-      type: String,
-      default: null,
+    props: {
+      authorized: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      authorizedRole: {
+        type: String,
+        default: null,
+      },
+      authorizationErrorHeader: {
+        type: String,
+        default: null,
+      },
+      authorizationErrorDetails: {
+        type: String,
+        default: null,
+      },
+      loading: {
+        type: Boolean,
+        default: null,
+      },
     },
-    loading: {
-      type: Boolean,
-      default: null,
+    data() {
+      return {
+        notifications: [],
+        notificationModalShown: true,
+      };
     },
-  },
-  data() {
-    return {
-      notifications: [],
-      notificationModalShown: true,
-    };
-  },
-  computed: {
-    notAuthorized() {
-      // catch "not authorized" error, display AuthMessage
-      if (
-        this.error &&
-        this.error.response &&
-        this.error.response.status &&
-        this.error.response.status == 403
-      ) {
-        return true;
-      }
-      return !this.authorized;
+    computed: {
+      notAuthorized() {
+        // catch "not authorized" error, display AuthMessage
+        if (
+          this.error &&
+          this.error.response &&
+          this.error.response.status &&
+          this.error.response.status == 403
+        ) {
+          return true;
+        }
+        return !this.authorized;
+      },
+      showNotification() {
+        if (
+          (this.isAdmin || this.isSuperuser) &&
+          !Lockr.get(UPDATE_MODAL_DISMISSED) &&
+          this.notificationModalShown &&
+          this.notifications.length !== 0
+        ) {
+          return true;
+        }
+        return false;
+      },
+      mostRecentNotification() {
+        let languageCode = defaultLanguage.id;
+        // notifications should already be ordered by timestamp
+        const notification = this.notifications[0];
+        if (notification) {
+          // check if translated message is available for current language
+          if (notification.i18n[currentLanguage] !== undefined) {
+            languageCode = currentLanguage;
+          }
+          // i18n data structure generated by nutritionfacts_i18n.py
+          return {
+            id: notification.id,
+            title: notification.i18n[languageCode].title,
+            msg: notification.i18n[languageCode].msg,
+            linkText: notification.i18n[languageCode].link_text,
+            linkUrl: notification.link_url,
+          };
+        }
+        return null;
+      },
     },
-    showNotification() {
-      if (
-        (this.isAdmin || this.isSuperuser) &&
-        !Lockr.get(UPDATE_MODAL_DISMISSED) &&
-        this.notificationModalShown &&
-        this.notifications.length !== 0
-      ) {
-        return true;
-      }
-      return false;
+    created() {
+      this.getNotifications();
     },
-    mostRecentNotification() {
-      let languageCode = defaultLanguage.id;
-      // notifications should already be ordered by timestamp
-      const notification = this.notifications[0];
-      if (notification) {
-        // check if translated message is available for current language
-        if (notification.i18n[currentLanguage] !== undefined) {
-          languageCode = currentLanguage;
+    methods: {
+      async getNotifications() {
+        const { isAdmin, isSuperuser } = useUser();
+        if (isAdmin || isSuperuser) {
+          try {
+            const notifications = await PingbackNotificationResource.fetchCollection();
+            this.notifications = _notificationListState(notifications);
+          } catch (error) {
+            this.dispatchError(error);
+          }
         }
-        // i18n data structure generated by nutritionfacts_i18n.py
-        return {
-          id: notification.id,
-          title: notification.i18n[languageCode].title,
-          msg: notification.i18n[languageCode].msg,
-          linkText: notification.i18n[languageCode].link_text,
-          linkUrl: notification.link_url,
-        };
-      }
-      return null;
-    },
-  },
-  methods: {
-    async getNotifications() {
-      const { isAdmin, isSuperuser } = useUser();
-      if (isAdmin || isSuperuser) {
+      },
+      async saveDismissedNotification(notificationId) {
+        const { user_id } = useUser();
         try {
-          const notifications = await PingbackNotificationResource.fetchCollection();
-          this.notifications = _notificationListState(notifications);
+          await PingbackNotificationDismissedResource.saveModel({
+            data: {
+              user: user_id,
+              notification: notificationId,
+            },
+          });
+          this.removeNotification(notificationId);
         } catch (error) {
           this.dispatchError(error);
         }
-      }
-    },
-    async saveDismissedNotification(notificationId) {
-      const { user_id } = useUser();
-      try {
-        await PingbackNotificationDismissedResource.saveModel({
-          data: {
-            user: user_id,
-            notification: notificationId,
-          }
-        });
-        this.removeNotification(notificationId);
-      } catch (error) {
-        this.dispatchError(error);
-      }
-    },
-    dismissUpdateModal() {
-      if (this.notifications.length === 0) {
-        this.notificationModalShown = false;
-        Lockr.set(UPDATE_MODAL_DISMISSED, true);
-      }
-    },
-    dispatchError(error) {
-      this.$store.dispatch('handleApiError', { error });
-    },
-    removeNotification(notificationId) {
-      this.notifications = this.notifications.filter(n => n.id !== notificationId);
+      },
+      dismissUpdateModal() {
+        if (this.notifications.length === 0) {
+          this.notificationModalShown = false;
+          Lockr.set(UPDATE_MODAL_DISMISSED, true);
+        }
+      },
+      dispatchError(error) {
+        this.$store.dispatch('handleApiError', { error });
+      },
+      removeNotification(notificationId) {
+        this.notifications = this.notifications.filter(n => n.id !== notificationId);
+      },
     },
-  },
-  created() {
-    this.getNotifications();
-  },
-};
+  };
 
-function _notificationListState(data) {
-  return data.map(notification => ({
-    id: notification.id,
-    version_range: notification.version_range,
-    timestamp: notification.timestamp,
-    link_url: notification.link_url,
-    i18n: notification.i18n,
-  }));
-}
+  function _notificationListState(data) {
+    return data.map(notification => ({
+      id: notification.id,
+      version_range: notification.version_range,
+      timestamp: notification.timestamp,
+      link_url: notification.link_url,
+      i18n: notification.i18n,
+    }));
+  }
 
 </script>
 

From 1505978ccf0cc3635e4012a885806dc0020e6d09 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 7 Sep 2024 09:19:00 +0530
Subject: [PATCH 12/65] updated colIndex

---
 .../assets/src/views/ManageClassPage/index.vue       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
index 31984bcfda2..b41e6d7d1f3 100644
--- a/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue
@@ -43,10 +43,10 @@
         :dataLoading="dataLoading"
         sortable
       >
-        <template #header="{ header, index }">
-          <span :class="{ visuallyhidden: index === 3 }">{{ header.label }}</span>
+        <template #header="{ header, colIndex }">
+          <span :class="{ visuallyhidden: colIndex === 3 }">{{ header.label }}</span>
         </template>
-        <template #cell="{ content, rowIndex, colIndex, row }">
+        <template #cell="{ content, colIndex, row }">
           <span v-if="colIndex === 0">
             <KRouterLink
               :text="content"
@@ -147,19 +147,19 @@
           },
           {
             label: this.coreString('coachesLabel'),
-            dataType: 'others',
+            dataType: 'undefined',
             minWidth: '150px',
             width: '30%',
           },
           {
             label: this.coreString('learnersLabel'),
-            dataType: 'numeric',
+            dataType: 'number',
             minWidth: '150px',
             width: '20%',
           },
           {
             label: this.coreString('userActionsColumnHeader'),
-            dataType: 'others',
+            dataType: 'undefined',
             minWidth: '150px',
             width: '30%',
           },

From f7297065fb9997a36102a0352e700a83f0f36d95 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sat, 7 Sep 2024 09:24:55 +0530
Subject: [PATCH 13/65] updated KDS version

---
 kolibri/core/package.json                     | 2 +-
 packages/kolibri-core-for-export/package.json | 2 +-
 yarn.lock                                     | 8 +++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index aa425cb6ba7..e285fe53702 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -22,7 +22,7 @@
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
 
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88",
 
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index ab6ddbc13d7..430aceeacf1 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -25,7 +25,7 @@
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
 
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index a138c97a4a6..0d681fb91bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7764,11 +7764,9 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-
-"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0":
-  version "5.0.0-rc3"
-  resolved "https://github.com/BabyElias/kolibri-design-system#7764ef4b5f9b66ebd90d2ad389ae3d44252437a0"
-
+"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88":
+  version "5.0.0-rc4"
+  resolved "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88"
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 939aab9049c2b9613906ca43754bbe28519d70de Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sat, 7 Sep 2024 22:33:33 +0530
Subject: [PATCH 14/65] removed empty bashrc files

---
 .bas_hprofile | 0
 .bash_profile | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 .bas_hprofile
 delete mode 100644 .bash_profile

diff --git a/.bas_hprofile b/.bas_hprofile
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/.bash_profile b/.bash_profile
deleted file mode 100644
index e69de29bb2d..00000000000

From d85b50631f78c4729226f5b81eb7bfea71302298 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 12 Sep 2024 09:20:51 +0530
Subject: [PATCH 15/65] updated kds to v5.0.0-rc5

---
 kolibri/core/package.json                     |  2 +-
 packages/kolibri-core-for-export/package.json |  2 +-
 yarn.lock                                     | 16 +++++++++++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index e285fe53702..450bd8b00dd 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -22,7 +22,7 @@
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
 
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88",
+    "kolibri-design-system": "5.0.0-rc5",
 
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 430aceeacf1..1709b7385eb 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -25,7 +25,7 @@
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
 
-    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88",
+    "kolibri-design-system": "5.0.0-rc5",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index 0d681fb91bb..286e483706e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2963,6 +2963,15 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7764,9 +7773,10 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88":
-  version "5.0.0-rc4"
-  resolved "https://github.com/BabyElias/kolibri-design-system#7acfa97775799aa8cde3b3be2f6c7a76f0c7ba88"
+kolibri-design-system@5.0.0-rc5:
+  version "5.0.0-rc5"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc5.tgz#54daecb859d389a9deee49276d05ba14ebae15ab"
+  integrity sha512-Lam9bwSgKk7Dz6nblvnM/uA0H6BX7pPPGgXCRSyp7m7d9DasqrjArkhXuc5TopSjMfajn3hXzWNg4nhX/w33EQ==
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 07c14d4b801a998c94534f64e3fcb5c97e9e79e8 Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sun, 15 Sep 2024 17:26:17 +0530
Subject: [PATCH 16/65] fixed import errors

---
 .../core/assets/src/state/modules/core/actions.js    | 12 +-----------
 kolibri/core/assets/src/views/NotificationsRoot.vue  |  7 +++++++
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index c3c72fa05e2..9de7c597303 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -6,8 +6,6 @@ import {
   FacilityResource,
   FacilityDatasetResource,
   UserSyncStatusResource,
-  PingbackNotificationResource,
-  PingbackNotificationDismissedResource,
 } from 'kolibri.resources';
 import { setServerTime } from 'kolibri.utils.serverClock';
 import urls from 'kolibri.urls';
@@ -36,15 +34,7 @@ const logging = logger.getLogger(__filename);
  * the API to state in the Vuex store
  */
 
-function _notificationListState(data) {
-  return data.map(notification => ({
-    id: notification.id,
-    version_range: notification.version_range,
-    timestamp: notification.timestamp,
-    link_url: notification.link_url,
-    i18n: notification.i18n,
-  }));
-}
+
 
 /**
  * Actions
diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index b30b8720181..9d6cda08af0 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -44,6 +44,13 @@
 
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
+  import {
+  FacilityResource,
+  FacilityDatasetResource,
+  UserSyncStatusResource,
+  PingbackNotificationResource,
+  PingbackNotificationDismissedResource,
+} from 'kolibri.resources';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';

From d519363e1c3f81741cf68d441e330c54157fcf0e Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Mon, 23 Sep 2024 07:52:14 +0000
Subject: [PATCH 17/65] [pre-commit.ci lite] apply automatic fixes

---
 .../core/assets/src/state/modules/core/actions.js    |  2 --
 kolibri/core/assets/src/views/NotificationsRoot.vue  | 12 ++++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index 9de7c597303..eb7e8cbc755 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -34,8 +34,6 @@ const logging = logger.getLogger(__filename);
  * the API to state in the Vuex store
  */
 
-
-
 /**
  * Actions
  *
diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 9d6cda08af0..1706eebc066 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -45,12 +45,12 @@
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import {
-  FacilityResource,
-  FacilityDatasetResource,
-  UserSyncStatusResource,
-  PingbackNotificationResource,
-  PingbackNotificationDismissedResource,
-} from 'kolibri.resources';
+    FacilityResource,
+    FacilityDatasetResource,
+    UserSyncStatusResource,
+    PingbackNotificationResource,
+    PingbackNotificationDismissedResource,
+  } from 'kolibri.resources';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';

From 41e0ac39b2fefc5acb065cdfb7dd8eaf7b4fdc85 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 08:12:45 -0500
Subject: [PATCH 18/65] Move reports into quizsummarypage

---
 .../coach/assets/src/routes/planExamRoutes.js |   2 +-
 .../src/views/plan/QuizSummaryPage/index.vue  | 121 +++++++++++++-----
 2 files changed, 92 insertions(+), 31 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 1b75a290b67..d5f1a26077b 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -53,7 +53,7 @@ export default [
   },
   {
     name: QuizSummaryPage.name,
-    path: '/:classId/plan/quizzes/:quizId',
+    path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index ee1db0ddf9c..bfd2a0721d9 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -36,20 +36,26 @@
           v-if="!loading"
           :topMargin="16"
         >
-          <section v-if="selectedQuestions">
-            <h2>
-              {{ coachString('numberOfQuestions', { value: selectedQuestions.length }) }}
-            </h2>
-
-            <p>
-              {{ orderDescriptionString }}
-            </p>
-
-            <QuestionListPreview
-              :sections="quiz.question_sources || []"
-              :selectedExercises="selectedExercises"
+          <ReportsControls @export="exportCSV" />
+          <HeaderTabs :enablePrint="true">
+            <KTabsList
+              ref="tabList"
+              :tabsId="QUIZZES_TABS_ID"
+              :ariaLabel="coachString('detailsLabel')"
+              :activeTabId="QuizzesTabs.REPORT"
+              :tabs="tabs"
+              @click="() => saveTabsClick(QUIZZES_TABS_ID)"
+            />
+          </HeaderTabs>
+          <KTabsPanel
+            :tabsId="QUIZZES_TABS_ID"
+            :activeTabId="QuizzesTabs.REPORT"
+          >
+            <ReportsLearnersTable
+              :entries="table"
+              :questionCount="exam.question_count"
             />
-          </section>
+          </KTabsPanel>
         </KPageContainer>
       </KGridItem>
     </KGrid>
@@ -68,8 +74,9 @@
 <script>
 
   import { mapState } from 'vuex';
-  import fromPairs from 'lodash/fromPairs';
   import find from 'lodash/find';
+  import sortBy from 'lodash/sortBy';
+  import fromPairs from 'lodash/fromPairs';
   import { ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
   import CatchErrors from 'kolibri.utils.CatchErrors';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -77,10 +84,15 @@
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
+  import { QUIZZES_TABS_ID, QuizzesTabs } from '../../../constants/tabsConstants';
+
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
-  import QuestionListPreview from '../CreateExamPage/QuestionListPreview';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
+  import ReportsControls from '../../reports/ReportsControls';
+  import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
+  import * as csvFields from '../../../csv/fields';
+  import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
   import ManageExamModals from './ManageExamModals';
   import {
@@ -94,8 +106,9 @@
     name: 'QuizSummaryPage',
     components: {
       CoachAppBarPage,
+      ReportsControls,
       ManageExamModals,
-      QuestionListPreview,
+      ReportsLearnersTable,
       QuizOptionsDropdownMenu,
     },
     mixins: [commonCoach, coachStringsMixin, commonCoreStrings],
@@ -122,19 +135,15 @@
         selectedExercises: {},
         loading: true,
         currentAction: '',
+        QUIZZES_TABS_ID,
+        QuizzesTabs,
       };
     },
     computed: {
       ...mapState(['classList']),
-      selectedQuestions() {
-        return this.quiz.question_sources.reduce((acc, section) => {
-          acc = [...acc, ...section.questions];
-          return acc;
-        }, []);
-      },
-      quizIsRandomized() {
-        return !this.quiz.learners_see_fixed_order;
-      },
+      // quizIsRandomized() {
+      //   return !this.quiz.learners_see_fixed_order;
+      // },
       avgScore() {
         return this.getExamAvgScore(this.$route.params.quizId, this.recipients);
       },
@@ -144,14 +153,45 @@
       recipients() {
         return this.getLearnersForExam(this.exam);
       },
-      orderDescriptionString() {
-        return this.quizIsRandomized
-          ? this.randomizedSectionOptionDescription$()
-          : this.fixedSectionOptionDescription$();
-      },
+      // orderDescriptionString() {
+      //   return this.quizIsRandomized
+      //     ? this.randomizedSectionOptionDescription$()
+      //     : this.fixedSectionOptionDescription$();
+      // },
       classId() {
         return this.$route.params.classId;
       },
+      tabs() {
+        const tabsList = [
+          {
+            id: QuizzesTabs.REPORT,
+            label: this.coachString('reportLabel'),
+            to: this.classRoute('ReportsQuizLearnerListPage'),
+          },
+        ];
+        const isDraftExam = this.exam && this.exam.draft;
+        if (!isDraftExam) {
+          tabsList.push({
+            id: QuizzesTabs.DIFFICULT_QUESTIONS,
+            label: this.coachString('difficultQuestionsLabel'),
+            to: this.classRoute('ReportsQuizQuestionListPage'),
+          });
+        }
+        return tabsList;
+      },
+      table() {
+        const learners = this.recipients.map(learnerId => this.learnerMap[learnerId]);
+        const sorted = sortBy(learners, ['name']);
+        return sorted.map(learner => {
+          const tableRow = {
+            groups: this.getGroupNamesForLearner(learner.id),
+            statusObj: this.getExamStatusObjForLearner(this.exam.id, learner.id),
+            link: this.detailLink(learner.id),
+          };
+          Object.assign(tableRow, learner);
+          return tableRow;
+        });
+      },
     },
     beforeRouteEnter(to, from, next) {
       return fetchQuizSummaryPageData(to.params.quizId)
@@ -255,6 +295,27 @@
             this.$store.dispatch('handleApiError', { error });
           });
       },
+      detailLink(learnerId) {
+        return this.classRoute(PageNames.REPORTS_QUIZ_LEARNER_PAGE_ROOT, {
+          learnerId,
+        });
+      },
+      exportCSV() {
+        const columns = [
+          ...csvFields.name(),
+          ...csvFields.learnerProgress('statusObj.status'),
+          ...csvFields.score(),
+          ...csvFields.quizQuestionsAnswered(this.exam),
+          ...csvFields.list('groups', 'groupsLabel'),
+        ];
+
+        const exporter = new CSVExporter(columns, this.className);
+        exporter.addNames({
+          resource: this.exam.title,
+        });
+
+        exporter.export(this.table);
+      },
     },
     $trs: {
       uniqueTitleError: {

From 1b474dcf7327ebfabf549a4dca9dd16a387879be Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Fri, 27 Sep 2024 19:53:13 +0530
Subject: [PATCH 19/65] fixed error handling

---
 .../assets/src/views/NotificationsRoot.vue    | 56 ++-----------------
 1 file changed, 4 insertions(+), 52 deletions(-)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 1706eebc066..6cd1cbe415b 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -44,13 +44,6 @@
 
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
-  import {
-    FacilityResource,
-    FacilityDatasetResource,
-    UserSyncStatusResource,
-    PingbackNotificationResource,
-    PingbackNotificationDismissedResource,
-  } from 'kolibri.resources';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
@@ -102,11 +95,14 @@
     },
     data() {
       return {
-        notifications: [],
         notificationModalShown: true,
       };
     },
     computed: {
+      ...mapState({
+        error: state => state.core.error,
+        notifications: state => state.core.notifications,
+      }),
       notAuthorized() {
         // catch "not authorized" error, display AuthMessage
         if (
@@ -151,60 +147,16 @@
         return null;
       },
     },
-    created() {
-      this.getNotifications();
-    },
     methods: {
-      async getNotifications() {
-        const { isAdmin, isSuperuser } = useUser();
-        if (isAdmin || isSuperuser) {
-          try {
-            const notifications = await PingbackNotificationResource.fetchCollection();
-            this.notifications = _notificationListState(notifications);
-          } catch (error) {
-            this.dispatchError(error);
-          }
-        }
-      },
-      async saveDismissedNotification(notificationId) {
-        const { user_id } = useUser();
-        try {
-          await PingbackNotificationDismissedResource.saveModel({
-            data: {
-              user: user_id,
-              notification: notificationId,
-            },
-          });
-          this.removeNotification(notificationId);
-        } catch (error) {
-          this.dispatchError(error);
-        }
-      },
       dismissUpdateModal() {
         if (this.notifications.length === 0) {
           this.notificationModalShown = false;
           Lockr.set(UPDATE_MODAL_DISMISSED, true);
         }
       },
-      dispatchError(error) {
-        this.$store.dispatch('handleApiError', { error });
-      },
-      removeNotification(notificationId) {
-        this.notifications = this.notifications.filter(n => n.id !== notificationId);
-      },
     },
   };
 
-  function _notificationListState(data) {
-    return data.map(notification => ({
-      id: notification.id,
-      version_range: notification.version_range,
-      timestamp: notification.timestamp,
-      link_url: notification.link_url,
-      i18n: notification.i18n,
-    }));
-  }
-
 </script>
 
 

From 950f81adcbbe5b71db44892d661119905c7b31c5 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 09:50:39 -0500
Subject: [PATCH 20/65] Add ReportsDifficultQuestionsTable

---
 .../coach/assets/src/routes/planExamRoutes.js |  2 +
 .../src/views/plan/QuizSummaryPage/index.vue  | 77 +++++++++++++---
 .../ReportsDifficultQuestionsTable.vue        | 91 +++++++++++++++++++
 3 files changed, 158 insertions(+), 12 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index d5f1a26077b..ff0f1a3b83a 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -6,6 +6,7 @@ import ReplaceQuestions from '../views/plan/CreateExamPage/ReplaceQuestions.vue'
 import CoachExamsPage from '../views/plan/CoachExamsPage';
 import QuizSummaryPage from '../views/plan/QuizSummaryPage';
 import SectionOrder from '../views/plan/CreateExamPage/SectionOrder';
+import { generateQuestionListHandler } from '../modules/questionList/handlers';
 
 export default [
   {
@@ -55,6 +56,7 @@ export default [
     name: QuizSummaryPage.name,
     path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
+    handler: generateQuestionListHandler(['quizId']),
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index bfd2a0721d9..ef305ea8ac4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -42,19 +42,29 @@
               ref="tabList"
               :tabsId="QUIZZES_TABS_ID"
               :ariaLabel="coachString('detailsLabel')"
-              :activeTabId="QuizzesTabs.REPORT"
+              :activeTabId="activeTabId"
               :tabs="tabs"
               @click="() => saveTabsClick(QUIZZES_TABS_ID)"
             />
           </HeaderTabs>
           <KTabsPanel
             :tabsId="QUIZZES_TABS_ID"
-            :activeTabId="QuizzesTabs.REPORT"
+            :activeTabId="activeTabId"
           >
-            <ReportsLearnersTable
-              :entries="table"
-              :questionCount="exam.question_count"
-            />
+            <template #[QuizzesTabs.REPORT]>
+              <ReportsLearnersTable
+                ref="table"
+                :entries="learnersTable"
+                :questionCount="exam.question_count"
+              />
+            </template>
+            <template #[QuizzesTabs.DIFFICULT_QUESTIONS]>
+              <ReportsDifficultQuestionsTable
+                ref="table"
+                :entries="difficultQuestionsTable"
+                :isMissingResource="exam.missing_resource"
+              />
+            </template>
           </KTabsPanel>
         </KPageContainer>
       </KGridItem>
@@ -73,7 +83,7 @@
 
 <script>
 
-  import { mapState } from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
   import find from 'lodash/find';
   import sortBy from 'lodash/sortBy';
   import fromPairs from 'lodash/fromPairs';
@@ -85,12 +95,14 @@
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
   import { QUIZZES_TABS_ID, QuizzesTabs } from '../../../constants/tabsConstants';
+  import { useCoachTabs } from '../../../composables/useCoachTabs';
 
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
   import ReportsControls from '../../reports/ReportsControls';
   import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
+  import ReportsDifficultQuestionsTable from '../../reports/ReportsDifficultQuestionsTable';
   import * as csvFields from '../../../csv/fields';
   import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
@@ -110,17 +122,23 @@
       ManageExamModals,
       ReportsLearnersTable,
       QuizOptionsDropdownMenu,
+      ReportsDifficultQuestionsTable,
     },
     mixins: [commonCoach, coachStringsMixin, commonCoreStrings],
     setup() {
       const { randomizedSectionOptionDescription$, fixedSectionOptionDescription$ } =
         enhancedQuizManagementStrings;
       const { createSnackbar, clearSnackbar } = useSnackbar();
+
+      const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
+
       return {
         randomizedSectionOptionDescription$,
         fixedSectionOptionDescription$,
+        wereTabsClickedRecently,
         createSnackbar,
         clearSnackbar,
+        saveTabsClick,
       };
     },
     data() {
@@ -141,14 +159,26 @@
     },
     computed: {
       ...mapState(['classList']),
+      ...mapGetters('questionList', ['difficultQuestions']),
+
       // quizIsRandomized() {
       //   return !this.quiz.learners_see_fixed_order;
       // },
+      quizId() {
+        return this.$route.params.quizId;
+      },
+      activeTabId() {
+        const { tabId } = this.$route.params;
+        if (Object.values(QuizzesTabs).includes(tabId)) {
+          return tabId;
+        }
+        return QuizzesTabs.REPORT;
+      },
       avgScore() {
-        return this.getExamAvgScore(this.$route.params.quizId, this.recipients);
+        return this.getExamAvgScore(this.quizId, this.recipients);
       },
       exam() {
-        return this.examMap[this.$route.params.quizId];
+        return this.examMap[this.quizId];
       },
       recipients() {
         return this.getLearnersForExam(this.exam);
@@ -166,20 +196,24 @@
           {
             id: QuizzesTabs.REPORT,
             label: this.coachString('reportLabel'),
-            to: this.classRoute('ReportsQuizLearnerListPage'),
           },
         ];
+
         const isDraftExam = this.exam && this.exam.draft;
         if (!isDraftExam) {
           tabsList.push({
             id: QuizzesTabs.DIFFICULT_QUESTIONS,
             label: this.coachString('difficultQuestionsLabel'),
-            to: this.classRoute('ReportsQuizQuestionListPage'),
           });
         }
+
+        tabsList.forEach(tab => {
+          tab.to = this.classRoute('QuizSummaryPage', { quizId: this.quizId, tabId: tab.id });
+        });
+
         return tabsList;
       },
-      table() {
+      learnersTable() {
         const learners = this.recipients.map(learnerId => this.learnerMap[learnerId]);
         const sorted = sortBy(learners, ['name']);
         return sorted.map(learner => {
@@ -192,6 +226,13 @@
           return tableRow;
         });
       },
+      difficultQuestionsTable() {
+        return this.difficultQuestions.map(question => {
+          const tableRow = {};
+          Object.assign(tableRow, question);
+          return tableRow;
+        });
+      },
     },
     beforeRouteEnter(to, from, next) {
       return fetchQuizSummaryPageData(to.params.quizId)
@@ -202,6 +243,18 @@
           next(vm => vm.setError(error));
         });
     },
+    mounted() {
+      // focus the active tab but only when it's likely
+      // that this header was re-mounted as a result
+      // of navigation after clicking a tab (focus shouldn't
+      // be manipulated programatically in other cases, e.g.
+      // when visiting the page for the first time)
+      if (this.wereTabsClickedRecently(this.QUIZZES_TABS_ID)) {
+        this.$nextTick(() => {
+          this.$refs.tabList.focusActiveTab();
+        });
+      }
+    },
     methods: {
       // @public
       setData(data) {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
new file mode 100644
index 00000000000..9b1d3bdbc90
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -0,0 +1,91 @@
+<template>
+
+  <CoreTable :emptyMessage="questionListEmptyState$()">
+    <template #headers>
+      <th>{{ questionLabel$() }}</th>
+      <th>{{ helpNeededLabel$() }}</th>
+    </template>
+    <template #tbody>
+      <transition-group
+        tag="tbody"
+        name="list"
+      >
+        <tr
+          v-for="(tableRow, index) in entries"
+          :key="tableRow.item + index"
+        >
+          <td>
+            <span v-if="$isPrint">{{ tableRow.title }}</span>
+            <KRouterLink
+              v-if="!isMissingResource"
+              :text="tableRow.title"
+              :to="questionLink(tableRow.item)"
+              icon="question"
+            />
+            <span v-else> <KIcon icon="question" />{{ tableRow.title }} </span>
+          </td>
+          <td>
+            <LearnerProgressRatio
+              :verb="VERBS.needHelp"
+              :icon="ICONS.help"
+              :total="tableRow.total"
+              :count="tableRow.total - tableRow.correct"
+              :verbosity="1"
+            />
+          </td>
+        </tr>
+      </transition-group>
+    </template>
+  </CoreTable>
+
+</template>
+
+
+<script>
+
+  import commonCoach from '../common';
+  import LearnerProgressRatio from '../common/status/LearnerProgressRatio';
+  import { coachStrings } from '../common/commonCoachStrings';
+  import { PageNames } from './../../constants';
+
+  export default {
+    name: 'ReportsDifficultQuestionsTable',
+    components: {
+      LearnerProgressRatio,
+    },
+    mixins: [commonCoach],
+    setup() {
+      const { questionListEmptyState$, questionLabel$, helpNeededLabel$ } = coachStrings;
+
+      return {
+        questionListEmptyState$,
+        questionLabel$,
+        helpNeededLabel$,
+      };
+    },
+    props: {
+      entries: {
+        type: Array,
+        default: () => [],
+      },
+      isMissingResource: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      questionLink(questionId) {
+        return this.classRoute(
+          this.group
+            ? PageNames.REPORTS_GROUP_REPORT_QUIZ_QUESTION_PAGE_ROOT
+            : PageNames.REPORTS_QUIZ_QUESTION_PAGE_ROOT,
+          {
+            questionId,
+            quizId: this.$route.params.quizId,
+          },
+        );
+      },
+    },
+  };
+
+</script>

From a5356189cdc032ce42dfaa0266002c68a3aef842 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 27 Sep 2024 10:33:53 -0500
Subject: [PATCH 21/65] add export csv

---
 .../src/views/plan/QuizSummaryPage/index.vue  | 17 +----------
 .../ReportsDifficultQuestionsTable.vue        | 29 +++++++++++++++++++
 .../views/reports/ReportsLearnersTable.vue    | 24 +++++++++++++++
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index ef305ea8ac4..9122a9f1f16 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -103,8 +103,6 @@
   import ReportsControls from '../../reports/ReportsControls';
   import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
   import ReportsDifficultQuestionsTable from '../../reports/ReportsDifficultQuestionsTable';
-  import * as csvFields from '../../../csv/fields';
-  import CSVExporter from '../../../csv/exporter';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
   import ManageExamModals from './ManageExamModals';
   import {
@@ -354,20 +352,7 @@
         });
       },
       exportCSV() {
-        const columns = [
-          ...csvFields.name(),
-          ...csvFields.learnerProgress('statusObj.status'),
-          ...csvFields.score(),
-          ...csvFields.quizQuestionsAnswered(this.exam),
-          ...csvFields.list('groups', 'groupsLabel'),
-        ];
-
-        const exporter = new CSVExporter(columns, this.className);
-        exporter.addNames({
-          resource: this.exam.title,
-        });
-
-        exporter.export(this.table);
+        this.$refs.table.exportCSV?.();
       },
     },
     $trs: {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
index 9b1d3bdbc90..d32dc295ca9 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -46,6 +46,8 @@
   import commonCoach from '../common';
   import LearnerProgressRatio from '../common/status/LearnerProgressRatio';
   import { coachStrings } from '../common/commonCoachStrings';
+  import * as csvFields from '../../csv/fields';
+  import CSVExporter from '../../csv/exporter';
   import { PageNames } from './../../constants';
 
   export default {
@@ -73,6 +75,14 @@
         default: false,
       },
     },
+    computed: {
+      exam() {
+        return this.examMap[this.$route.params.quizId];
+      },
+      group() {
+        return this.$route.params.groupId && this.groupMap[this.$route.params.groupId];
+      },
+    },
     methods: {
       questionLink(questionId) {
         return this.classRoute(
@@ -85,6 +95,25 @@
           },
         );
       },
+      /**
+       * @public
+       */
+      exportCSV() {
+        const columns = [...csvFields.questionTitle(), ...csvFields.helpNeeded()];
+
+        const exporter = new CSVExporter(columns, this.className);
+        const names = {
+          resource: this.exam.title,
+          difficultQuestions: this.coachString('difficultQuestionsLabel'),
+        };
+
+        if (this.group) {
+          names.group = this.group.name;
+        }
+        exporter.addNames(names);
+
+        exporter.export(this.entries);
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
index 0e0fd9be25a..355fe4f1121 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLearnersTable.vue
@@ -103,6 +103,8 @@
   import isUndefined from 'lodash/isUndefined';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
+  import * as csvFields from '../../csv/fields';
+  import CSVExporter from '../../csv/exporter';
 
   export default {
     name: 'ReportsLearnersTable',
@@ -142,6 +144,9 @@
       anyTries() {
         return this.entries.some(entry => !isUndefined(entry.statusObj.tries));
       },
+      exam() {
+        return this.examMap[this.$route.params.quizId];
+      },
     },
     methods: {
       completedQuestionsCountLabel(answered, total) {
@@ -181,6 +186,25 @@
       showQuizStatus(entry) {
         return this.questionCount && !isUndefined(entry.statusObj.num_answered);
       },
+      /**
+       * @public
+       */
+      exportCSV() {
+        const columns = [
+          ...csvFields.name(),
+          ...csvFields.learnerProgress('statusObj.status'),
+          ...csvFields.score(),
+          ...csvFields.quizQuestionsAnswered(this.exam),
+          ...csvFields.list('groups', 'groupsLabel'),
+        ];
+
+        const exporter = new CSVExporter(columns, this.className);
+        exporter.addNames({
+          resource: this.exam.title,
+        });
+
+        exporter.export(this.entries);
+      },
     },
     $trs: {
       allQuestionsAnswered: {

From 37960ba3ded3a0263ca26efcf5f113703d71870b Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sat, 28 Sep 2024 01:08:18 +0530
Subject: [PATCH 22/65] fixed errors

---
 .../assets/src/views/NotificationsRoot.vue    | 53 +++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 6cd1cbe415b..b826ce71dbb 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
@@ -36,12 +35,9 @@
       @submit="dismissUpdateModal"
     />
   </div>
-
 </template>
 
-
 <script>
-
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
@@ -95,14 +91,11 @@
     },
     data() {
       return {
+        notifications: [],
         notificationModalShown: true,
       };
     },
     computed: {
-      ...mapState({
-        error: state => state.core.error,
-        notifications: state => state.core.notifications,
-      }),
       notAuthorized() {
         // catch "not authorized" error, display AuthMessage
         if (
@@ -147,17 +140,59 @@
         return null;
       },
     },
+    created() {
+      this.getNotifications();
+    },
     methods: {
+      async getNotifications() {
+        const { isAdmin, isSuperuser } = useUser();
+        if (isAdmin || isSuperuser) {
+          try {
+            const notifications = await PingbackNotificationResource.fetchCollection();
+            this.notifications = _notificationListState(notifications);
+          } catch (error) {
+            this.dispatchError(error);
+          }
+        }
+      },
+      async saveDismissedNotification(notificationId) {
+        const { user_id } = useUser();
+        try {
+          await PingbackNotificationDismissedResource.saveModel({
+            data: {
+              user: user_id,
+              notification: notificationId,
+            },
+          });
+          this.removeNotification(notificationId);
+        } catch (error) {
+          this.dispatchError(error);
+        }
+      },
       dismissUpdateModal() {
         if (this.notifications.length === 0) {
           this.notificationModalShown = false;
           Lockr.set(UPDATE_MODAL_DISMISSED, true);
         }
       },
+      dispatchError(error) {
+        this.$store.dispatch('handleApiError', { error });
+      },
+      removeNotification(notificationId) {
+        this.notifications = this.notifications.filter(n => n.id !== notificationId);
+      },
     },
   };
 
+  function _notificationListState(data) {
+    return data.map(notification => ({
+      id: notification.id,
+      version_range: notification.version_range,
+      timestamp: notification.timestamp,
+      link_url: notification.link_url,
+      i18n: notification.i18n,
+    }));
+  }
 </script>
 
-
 <style lang="scss" scoped></style>

From 37fdf0842b8769821820d2ea1f6bffacea34b013 Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sat, 28 Sep 2024 01:09:40 +0530
Subject: [PATCH 23/65] fixed errors

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index b826ce71dbb..794ea770393 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -40,6 +40,13 @@
 <script>
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
+  import {
+    FacilityResource,
+    FacilityDatasetResource,
+    UserSyncStatusResource,
+    PingbackNotificationResource,
+    PingbackNotificationDismissedResource,
+  } from 'kolibri.resources';
   import { UPDATE_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { currentLanguage, defaultLanguage } from 'kolibri.utils.i18n';
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';

From 46f491e006377fe7d90eaee820cb73d79d7b25b0 Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sat, 28 Sep 2024 01:26:16 +0530
Subject: [PATCH 24/65] fixed linting errors

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 794ea770393..8476a6fd611 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -103,6 +103,9 @@
       };
     },
     computed: {
+      ...mapState({
+        error: state => state.core.error,
+      }),
       notAuthorized() {
         // catch "not authorized" error, display AuthMessage
         if (

From 3b7a568478407fb69490734ef993ba625c26e254 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:27:01 +0000
Subject: [PATCH 25/65] [pre-commit.ci lite] apply automatic fixes

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 8476a6fd611..ad7e38bf6fa 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
@@ -35,9 +36,12 @@
       @submit="dismissUpdateModal"
     />
   </div>
+
 </template>
 
+
 <script>
+
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import {
@@ -203,6 +207,8 @@
       i18n: notification.i18n,
     }));
   }
+
 </script>
 
+
 <style lang="scss" scoped></style>

From 6ce4a0bbdb96132b82c2be13da6a4f9299e4983c Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Sat, 28 Sep 2024 04:02:55 +0530
Subject: [PATCH 26/65] fixed notifications data undefining issue

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index ad7e38bf6fa..f976cfcf8d7 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -134,6 +134,9 @@
         return false;
       },
       mostRecentNotification() {
+        if (this.notifications.length === 0) {
+            return null;
+          }
         let languageCode = defaultLanguage.id;
         // notifications should already be ordered by timestamp
         const notification = this.notifications[0];
@@ -199,6 +202,9 @@
   };
 
   function _notificationListState(data) {
+    if (!data || data.length === 0) {
+        return [];
+      }
     return data.map(notification => ({
       id: notification.id,
       version_range: notification.version_range,

From 9b0b03a5950a7e2d8fc85f1e72880fdfceab23fb Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Sat, 28 Sep 2024 03:59:49 +0000
Subject: [PATCH 27/65] [pre-commit.ci lite] apply automatic fixes

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index f976cfcf8d7..68a0804909f 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -135,8 +135,8 @@
       },
       mostRecentNotification() {
         if (this.notifications.length === 0) {
-            return null;
-          }
+          return null;
+        }
         let languageCode = defaultLanguage.id;
         // notifications should already be ordered by timestamp
         const notification = this.notifications[0];
@@ -203,8 +203,8 @@
 
   function _notificationListState(data) {
     if (!data || data.length === 0) {
-        return [];
-      }
+      return [];
+    }
     return data.map(notification => ({
       id: notification.id,
       version_range: notification.version_range,

From 35f1795f254ce11c1b1cd4f8a10818cd6a0a4544 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 11:13:25 -0500
Subject: [PATCH 28/65] Add info to quizStatus

---
 .../assets/src/views/common/QuizStatus.vue    | 72 +++++++++++++------
 .../src/views/plan/QuizSummaryPage/index.vue  |  1 -
 .../ReportsDifficultQuestionsTable.vue        |  6 +-
 3 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 39043b50884..9c3ec7475b8 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -104,18 +104,15 @@
         </KGridItem>
       </div>
 
-      <!-- Class name  -->
-      <div
-        v-show="$isPrint"
-        class="status-item"
-      >
+      <!-- Recipients  -->
+      <div class="status-item">
         <KGridItem
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          {{ coachString('classLabel') }}
+          {{ coachString('recipientsLabel') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
@@ -123,12 +120,15 @@
           :layout12="layout12Value"
         >
           <div>
-            {{ className }}
+            <Recipients
+              :groupNames="groupAndAdHocLearnerNames"
+              :hasAssignments="exam.assignments.length > 0"
+            />
           </div>
         </KGridItem>
       </div>
 
-      <!-- Recipients  -->
+      <!-- Average Score -->
       <div class="status-item">
         <KGridItem
           class="status-label"
@@ -136,23 +136,22 @@
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          {{ coachString('recipientsLabel') }}
+          <span>{{ coachString('avgScoreLabel') }}</span>
+          <AverageScoreTooltip
+            v-show="!$isPrint"
+            class="avg-score-info"
+          />
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Value"
         >
-          <div>
-            <Recipients
-              :groupNames="groupAndAdHocLearnerNames"
-              :hasAssignments="exam.assignments.length > 0"
-            />
-          </div>
+          <Score :value="avgScore" />
         </KGridItem>
       </div>
 
-      <!-- Average Score -->
+      <!-- Class name  -->
       <div class="status-item">
         <KGridItem
           class="status-label"
@@ -160,18 +159,16 @@
           :layout8="{ span: 4 }"
           :layout12="layout12Label"
         >
-          <span>{{ coachString('avgScoreLabel') }}</span>
-          <AverageScoreTooltip
-            v-show="!$isPrint"
-            class="avg-score-info"
-          />
+          {{ coachString('classLabel') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
           :layout12="layout12Value"
         >
-          <Score :value="avgScore" />
+          <div>
+            {{ className }}
+          </div>
         </KGridItem>
       </div>
 
@@ -215,7 +212,29 @@
           :layout8="{ span: 4 }"
           :layout12="{ span: 12 }"
         >
-          <p>{{ exam.size_string ? exam.size_string : '--' }}</p>
+          <span>{{ exam.size_string ? exam.size_string : '--' }}</span>
+        </KGridItem>
+      </div>
+
+      <!-- Date created -->
+      <div class="status-item">
+        <KGridItem
+          class="status-label"
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 12 }"
+        >
+          {{ coreString('dateCreated') }}
+        </KGridItem>
+        <KGridItem
+          :layout4="{ span: 4 }"
+          :layout8="{ span: 4 }"
+          :layout12="{ span: 12 }"
+        >
+          <ElapsedTime
+            :date="examDateCreated"
+            style="margin-top: 8px"
+          />
         </KGridItem>
       </div>
     </KGrid>
@@ -347,6 +366,13 @@
           ':hover': { 'background-color': this.$darken1(this.$themePalette.red.v_1100) },
         };
       },
+      examDateCreated() {
+        if (this.exam.date_created) {
+          return new Date(this.exam.date_created);
+        } else {
+          return null;
+        }
+      },
       examDateArchived() {
         if (this.exam.date_archived) {
           return new Date(this.exam.date_archived);
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 9122a9f1f16..3078b353cd3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -62,7 +62,6 @@
               <ReportsDifficultQuestionsTable
                 ref="table"
                 :entries="difficultQuestionsTable"
-                :isMissingResource="exam.missing_resource"
               />
             </template>
           </KTabsPanel>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
index d32dc295ca9..214608b8d55 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -17,7 +17,7 @@
           <td>
             <span v-if="$isPrint">{{ tableRow.title }}</span>
             <KRouterLink
-              v-if="!isMissingResource"
+              v-if="!exam.missing_resource"
               :text="tableRow.title"
               :to="questionLink(tableRow.item)"
               icon="question"
@@ -70,10 +70,6 @@
         type: Array,
         default: () => [],
       },
-      isMissingResource: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       exam() {

From 6ebe48a5363de1d2730460f2c5e91cd16cb5ec37 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 14:53:29 -0500
Subject: [PATCH 29/65] Add made visible label

---
 .../assets/src/views/common/QuizStatus.vue    | 17 +++++++----
 .../src/views/common/StatusElapsedTime.vue    | 28 +++++++++++++++++++
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 9c3ec7475b8..23d88a3786a 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -82,16 +82,23 @@
       >
         <KGridItem
           class="status-label"
-          :layout4="{ span: 4 }"
+          style="padding-bottom: 16px"
+          :layout4="{ span: 3 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="{ span: 10 }"
         >
-          {{ $tr('reportVisibleToLearnersLabel') }}
+          <span> {{ $tr('reportVisibleToLearnersLabel') }} </span>
+          <StatusElapsedTime
+            v-if="exam.active"
+            :date="examDateOpened"
+            actionType="madeVisible"
+            style="font-weight: normal"
+          />
         </KGridItem>
         <KGridItem
-          :layout4="{ span: 4 }"
+          :layout4="{ span: 1 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="{ span: 2 }"
         >
           <KSwitch
             name="toggle-quiz-visibility"
diff --git a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
index 1cedce05165..623b4ef6aee 100644
--- a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
@@ -64,6 +64,8 @@
               return this.$tr('closedSecondsAgo', strParams);
             case 'opened':
               return this.$tr('openedSecondsAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleSecondsAgo', strParams);
             default:
               return '';
           }
@@ -78,6 +80,8 @@
               return this.$tr('closedMinutesAgo', strParams);
             case 'opened':
               return this.$tr('openedMinutesAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleMinutesAgo', strParams);
             default:
               return '';
           }
@@ -92,6 +96,8 @@
               return this.$tr('closedHoursAgo', strParams);
             case 'opened':
               return this.$tr('openedHoursAgo', strParams);
+            case 'madeVisible':
+              return this.$tr('madeVisibleHoursAgo', strParams);
             default:
               return '';
           }
@@ -105,6 +111,8 @@
             return this.$tr('closedDaysAgo', strParams);
           case 'opened':
             return this.$tr('openedDaysAgo', strParams);
+          case 'madeVisible':
+            return this.$tr('madeVisibleDaysAgo', strParams);
           default:
             return '';
         }
@@ -182,6 +190,26 @@
         message: 'Started {days} {days, plural, one {day} other {days}} ago',
         context: 'Indicates that a quiz was started a number of days prior to the current date.',
       },
+      madeVisibleSecondsAgo: {
+        message: 'Made visible {seconds} {seconds, plural, one {second} other {seconds}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of seconds prior to the current time, but is always less than 1 minute ago.',
+      },
+      madeVisibleMinutesAgo: {
+        message: 'Made visible {minutes} {minutes, plural, one {minute} other {minutes}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of minutes prior to the current time, but the time is always less than 1 hour ago.',
+      },
+      madeVisibleHoursAgo: {
+        message: 'Made visible {hours} {hours, plural, one {hour} other {hours}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of hours prior to the current time, but the time is always less than one day ago',
+      },
+      madeVisibleDaysAgo: {
+        message: 'Made visible {days} {days, plural, one {day} other {days}} ago',
+        context:
+          'Indicates that a quiz was made visible a number of days prior to the current date.',
+      },
     },
   };
 

From b117f6aa1233bd814b1eee76880ebf3c3355413a Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 15:18:57 -0500
Subject: [PATCH 30/65] Update preview button and quiz summary options

---
 .../assets/src/views/common/QuizLessonDetailsHeader.vue     | 1 +
 .../coach/assets/src/views/common/StatusElapsedTime.vue     | 2 +-
 .../views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue  | 6 +++---
 .../coach/assets/src/views/plan/QuizSummaryPage/index.vue   | 4 ++++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue b/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue
index 539bbb0eb5d..bc13a4a914d 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizLessonDetailsHeader.vue
@@ -20,6 +20,7 @@
             />
           </h1>
           <StatusElapsedTime
+            v-if="examOrLesson !== 'exam'"
             v-show="!$isPrint"
             :date="createdDate"
             actionType="created"
diff --git a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
index 623b4ef6aee..10604b587f8 100644
--- a/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/StatusElapsedTime.vue
@@ -18,7 +18,7 @@
   const HOUR = MINUTE * 60;
   const DAY = HOUR * 24;
 
-  const ACTION_TYPES = ['created', 'closed', 'opened'];
+  const ACTION_TYPES = ['created', 'closed', 'opened', 'madeVisible'];
 
   export default {
     name: 'StatusElapsedTime',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
index 922bca565d5..81f7cbe1ead 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/QuizOptionsDropdownMenu.vue
@@ -1,9 +1,9 @@
 <template>
 
-  <KButton
+  <KIconButton
     hasDropdown
+    icon="optionsHorizontal"
     appearance="flat-button"
-    :text="coreString('optionsLabel')"
   >
     <template #menu>
       <KDropdownMenu
@@ -11,7 +11,7 @@
         @select="$emit('select', $event.value)"
       />
     </template>
-  </KButton>
+  </KIconButton>
 
 </template>
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 3078b353cd3..83bd1b70c03 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -12,6 +12,10 @@
           examOrLesson="exam"
         >
           <template #dropdown>
+            <KButton
+              :text="coachString('previewAction')"
+              style="margin-right: 8px"
+            />
             <QuizOptionsDropdownMenu
               optionsFor="plan"
               :draft="exam && exam.draft"

From a51769c8a802a8fbab3a450b3ebe9e6f6aacdc04 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 15:43:40 -0500
Subject: [PATCH 31/65] Update learners label

---
 .../coach/assets/src/views/plan/QuizSummaryPage/index.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 83bd1b70c03..36e0ea02ad0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -196,7 +196,7 @@
         const tabsList = [
           {
             id: QuizzesTabs.REPORT,
-            label: this.coachString('reportLabel'),
+            label: this.coachString('learnersLabel'),
           },
         ];
 
@@ -209,7 +209,7 @@
         }
 
         tabsList.forEach(tab => {
-          tab.to = this.classRoute('QuizSummaryPage', { quizId: this.quizId, tabId: tab.id });
+          tab.to = this.classRoute('QuizSummaryPage', { tabId: tab.id });
         });
 
         return tabsList;

From d915ea27c67992f6a9c290f618bffaa004f33e52 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 30 Sep 2024 16:30:30 -0500
Subject: [PATCH 32/65] Fix print state

---
 .../coach/assets/src/views/common/QuizStatus.vue    |  4 ++--
 .../assets/src/views/plan/QuizSummaryPage/index.vue |  6 +++---
 .../assets/src/views/reports/ReportsControls.vue    | 13 +++++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 23d88a3786a..bf72f58af44 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -229,14 +229,14 @@
           class="status-label"
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="layout12Label"
         >
           {{ coreString('dateCreated') }}
         </KGridItem>
         <KGridItem
           :layout4="{ span: 4 }"
           :layout8="{ span: 4 }"
-          :layout12="{ span: 12 }"
+          :layout12="layout12Value"
         >
           <ElapsedTime
             :date="examDateCreated"
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 36e0ea02ad0..f523d75f4c8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -24,7 +24,7 @@
           </template>
         </QuizLessonDetailsHeader>
       </KGridItem>
-      <KGridItem :layout12="{ span: 4 }">
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 4 }">
         <h2 class="visuallyhidden">
           {{ coachString('generalInformationLabel') }}
         </h2>
@@ -35,10 +35,10 @@
           :exam="exam"
         />
       </KGridItem>
-      <KGridItem :layout12="{ span: 8 }">
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 8 }">
         <KPageContainer
           v-if="!loading"
-          :topMargin="16"
+          :topMargin="$isPrint ? 0 : 16"
         >
           <ReportsControls @export="exportCSV" />
           <HeaderTabs :enablePrint="true">
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
index 15a689ae307..9bfd039a0b5 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
@@ -74,12 +74,13 @@
         return this.isAppContext || this.disableExport;
       },
       isMainReport() {
-        return (
-          this.$route.name === 'ReportsQuizListPage' ||
-          this.$route.name === 'ReportsGroupListPage' ||
-          this.$route.name === 'ReportsLearnerListPage' ||
-          this.$route.name === 'ReportsLessonListPage'
-        );
+        return [
+          'ReportsQuizListPage',
+          'ReportsGroupListPage',
+          'ReportsLearnerListPage',
+          'ReportsLessonListPage',
+          'QuizSummaryPage',
+        ].includes(this.$route.name);
       },
       classLearnersListRoute() {
         const { query } = this.$route;

From c0f3852871ecbb83dd53c664c9c589f1751fcf79 Mon Sep 17 00:00:00 2001
From: Sujai Kumar Gupta <b210031@nitsikkim.ac.in>
Date: Tue, 1 Oct 2024 16:42:39 +0530
Subject: [PATCH 33/65] update the AUTHORS.md file in develop branch for new
 contributors

---
 .github/workflows/add_contributor.yml | 89 +++++++++++++--------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/.github/workflows/add_contributor.yml b/.github/workflows/add_contributor.yml
index e50a8ed9f53..21cb2cea998 100644
--- a/.github/workflows/add_contributor.yml
+++ b/.github/workflows/add_contributor.yml
@@ -1,65 +1,64 @@
 name: Add new contributor to AUTHORS.md
+
 on:
-  pull_request:
-    types: [opened]
+  pull_request_target:
+    types:
+      - closed
 
 jobs:
-  check_contributor_exists:
+  update-authors:
+    if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
 
-    outputs:
-      is_contributor_in_file: ${{ steps.check_contributor_step.outputs.exists }}
-
     steps:
-      - name: Checkout repository
+      - name: Checkout develop branch
         uses: actions/checkout@v4
         with:
-          sparse-checkout: .
+          ref: 'develop'
+          fetch-depth: 0
+          persist-credentials: false
 
-      - name: Check if contributor already exists
-        id: check_contributor_step
+      - name: Check if author is in AUTHORS.md
+        id: check-author
         run: |
-          exists=$(grep -c -F "${{ github.event.pull_request.user.login }}" AUTHORS.md || true)
-          if [[ $exists -gt 0 ]]; then
-            echo "exists=true" >> "$GITHUB_OUTPUT"
+          GH_USER="${{ github.event.pull_request.user.login }}"
+          # AUTHORS.md file already exist in repo, so can skip the conditional logic to create one if not exists
+          if ! grep -q "| ${GH_USER} |" AUTHORS.md; then
+            echo "new_author=true" >> $GITHUB_ENV
           else
-            echo "exists=false" >> "$GITHUB_OUTPUT"
+            echo "new_author=false" >> $GITHUB_ENV
           fi
 
-  add_contributor:
-    runs-on: ubuntu-latest
-    needs: check_contributor_exists
-
-    if: needs.check_contributor_exists.outputs.is_contributor_in_file == 'false'
-
-    permissions:
-      contents: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Git and checkout PR's branch
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-
-          git fetch origin refs/pull/${{ github.event.number }}/head:pr
-          git checkout pr
-
-      - name: Get contributor's full name and append to AUTHORS.md file
+      - name: Add author to AUTHORS.md if not present
+        if: env.new_author == 'true'
         run: |
-          username=${{ github.event.pull_request.user.login }}
-          full_name=$(curl -s -H "Authorization: token $GITHUB_TOKEN" "https://api.github.com/users/$username" | jq -r '.name')
-          if [[ "$full_name" == "" || "$full_name" == "null" ]]; then
-            full_name='-'
+          GH_USER="${{ github.event.pull_request.user.login }}"
+          AUTHOR_NAME=$(curl -s https://api.github.com/users/${GH_USER} | jq -r '.name')
+          if [ -z "$AUTHOR_NAME" ]; then
+            AUTHOR_NAME="-"
           fi
-          echo "| $full_name | $username |" >> AUTHORS.md
+          echo "| $AUTHOR_NAME | $GH_USER |" >> AUTHORS.md
 
-      - name: Commit and push changes to the contributor's PR branch
+      - name: Commit updated AUTHORS.md
+        if: env.new_author == 'true'
         run: |
+          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
           git add AUTHORS.md
           git commit -m "Add ${{ github.event.pull_request.user.login }} to AUTHORS.md"
-          git push origin pr:${{ github.event.pull_request.head.ref }}
+
+
+      - name: GitHub App token
+        if: env.new_author == 'true'
+        uses: tibdex/github-app-token@v2
+        id: generate-token
+        with:
+          app_id: ${{ secrets.LE_BOT_APP_ID }}
+          private_key: ${{ secrets.LE_BOT_PRIVATE_KEY }}
+
+      - name: Push changes to develop
+        if: env.new_author == 'true'
+        uses: ad-m/github-push-action@v0.8.0
+        with:
+          github_token: ${{ steps.generate-token.outputs.token }}
+          branch: 'develop'

From dac0233c66194a1fa8ac92a7ad370dc68f80e5c8 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 2 Oct 2024 10:25:56 -0500
Subject: [PATCH 34/65] New accordion design

---
 .../plugins/coach/assets/src/routes/index.js  |   8 +
 .../coach/assets/src/views/Playground.vue     | 327 ++++++++++++++++++
 .../accordion/AccordionContainer.vue          |  79 +++++
 .../components/accordion/AccordionItem.vue    | 137 ++++++++
 .../components/accordion/useAccordion.js      |  81 +++++
 5 files changed, 632 insertions(+)
 create mode 100644 kolibri/plugins/coach/assets/src/views/Playground.vue
 create mode 100644 packages/kolibri-common/components/accordion/AccordionContainer.vue
 create mode 100644 packages/kolibri-common/components/accordion/AccordionItem.vue
 create mode 100644 packages/kolibri-common/components/accordion/useAccordion.js

diff --git a/kolibri/plugins/coach/assets/src/routes/index.js b/kolibri/plugins/coach/assets/src/routes/index.js
index b6a6a915312..a922920b181 100644
--- a/kolibri/plugins/coach/assets/src/routes/index.js
+++ b/kolibri/plugins/coach/assets/src/routes/index.js
@@ -11,6 +11,7 @@ import HomeActivityPage from '../views/home/HomeActivityPage';
 import StatusTestPage from '../views/common/status/StatusTestPage';
 import { ClassesPageNames } from '../../../../learn/assets/src/constants';
 import { PageNames } from '../constants';
+import Playground from '../views/Playground.vue';
 import reportRoutes from './reportRoutes';
 import planRoutes from './planRoutes';
 import { classIdParamRequiredGuard } from './utils';
@@ -116,6 +117,13 @@ export default [
       store.dispatch('notLoading');
     },
   },
+  {
+    path: '/playground',
+    component: Playground,
+    handler() {
+      store.dispatch('notLoading');
+    },
+  },
   {
     path: '/',
     // Redirect to AllFacilitiesPage if a superuser and device has > 1 facility
diff --git a/kolibri/plugins/coach/assets/src/views/Playground.vue b/kolibri/plugins/coach/assets/src/views/Playground.vue
new file mode 100644
index 00000000000..b9343ae1ad0
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/Playground.vue
@@ -0,0 +1,327 @@
+<template>
+
+  <AppBarPage>
+    <KPageContainer>
+      <h2>Test 1</h2>
+      <AccordionContainer style="width: 600px">
+        <template #header>
+          <div style="display: flex; align-items: center; justify-content: space-between">
+            <div>
+              <KIcon
+                icon="practiceSolid"
+                style="margin-right: 16px"
+              />
+              <span>Identify Molecular formulas</span>
+            </div>
+            <KIconButton icon="minus" />
+          </div>
+        </template>
+        <template #default>
+          <AccordionItem
+            title="What is the molecular formula for glucose?"
+            :contentAppearanceOverrides="{ paddingTop: 0 }"
+          >
+            <template #trailing-actions>
+              <KIconButton icon="minus" />
+            </template>
+            <template #content>
+              <div
+                class="inner-content-1"
+                :style="{
+                  borderColor: $themeTokens.fineLine,
+                }"
+              >
+                This is just some text inside
+              </div>
+            </template>
+          </AccordionItem>
+          <AccordionItem
+            title="What is the molecular formula for glucose?"
+            :contentAppearanceOverrides="{ paddingTop: 0 }"
+          >
+            <template #trailing-actions>
+              <KIconButton icon="minus" />
+            </template>
+            <template #content>
+              <div
+                class="inner-content-1"
+                :style="{
+                  borderColor: $themeTokens.fineLine,
+                }"
+              >
+                This is just some text inside
+              </div>
+            </template>
+          </AccordionItem>
+        </template>
+      </AccordionContainer>
+    </KPageContainer>
+    <KPageContainer>
+      <h2>Test 2</h2>
+      <AccordionContainer style="width: 600px">
+        <template #header>
+          <div style="display: flex; align-items: center; justify-content: space-between">
+            <KCheckbox label="Identify Molecular formulas" />
+            <KIconButton icon="expandAll" />
+          </div>
+        </template>
+        <template #default>
+          <AccordionItem
+            title="What is the molecular formula for glucose?"
+            :contentAppearanceOverrides="{ paddingTop: 0 }"
+          >
+            <template #leading-actions>
+              <KCheckbox />
+            </template>
+            <template #content>
+              <div
+                class="inner-content-1"
+                :style="{
+                  borderColor: $themeTokens.fineLine,
+                }"
+              >
+                This is just some text inside
+              </div>
+            </template>
+          </AccordionItem>
+          <AccordionItem
+            title="What is the molecular formula for glucose?"
+            :contentAppearanceOverrides="{ paddingTop: 0 }"
+          >
+            <template #leading-actions>
+              <KCheckbox />
+            </template>
+            <template #content>
+              <div
+                class="inner-content-1"
+                :style="{
+                  borderColor: $themeTokens.fineLine,
+                }"
+              >
+                This is just some text inside
+              </div>
+            </template>
+          </AccordionItem>
+        </template>
+      </AccordionContainer>
+    </KPageContainer>
+    <KPageContainer style="width: 300px">
+      <h2>Test 3</h2>
+      <AccordionContainer style="box-shadow: none">
+        <AccordionItem
+          title="Section 1 title"
+          style="border-bottom: 0"
+          :headerAppearanceOverrides="{
+            backgroundColor: $themePalette.grey.v_50,
+            padding: '8px 20px',
+            fontWeight: 700,
+            color: $themePalette.grey.v_600,
+          }"
+        >
+          <template #content>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightblue"
+                style="margin-right: 16px"
+              />
+              <span>Question 1</span>
+            </div>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightgray"
+                style="margin-right: 16px"
+              />
+              <span>Question 2</span>
+            </div>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightgray"
+                style="margin-right: 16px"
+              />
+              <span>Question 3</span>
+            </div>
+          </template>
+        </AccordionItem>
+        <AccordionItem
+          title="Section 2 title"
+          style="border-bottom: 0"
+          :headerAppearanceOverrides="{
+            backgroundColor: $themePalette.grey.v_50,
+            padding: '8px 20px',
+            fontWeight: 700,
+            color: $themePalette.grey.v_600,
+          }"
+        >
+          <template #content>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightblue"
+                style="margin-right: 16px"
+              />
+              <span>Question 1</span>
+            </div>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightgray"
+                style="margin-right: 16px"
+              />
+              <span>Question 2</span>
+            </div>
+            <div style="padding: 16px 8px">
+              <KIcon
+                icon="dot"
+                color="lightgray"
+                style="margin-right: 16px"
+              />
+              <span>Question 3</span>
+            </div>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+    </KPageContainer>
+    <KPageContainer>
+      <h2>Test 4</h2>
+      <AccordionContainer style="width: 600px; margin-bottom: 32px">
+        <AccordionItem
+          title="Level"
+          :headerAppearanceOverrides="{
+            backgroundColor: '#ECF0FE',
+            borderColor: '#4368F5',
+            borderLeft: '4px solid #4368F5',
+          }"
+        >
+          <template #content>
+            <div>
+              <KRadioButtonGroup>
+                <KRadioButton label="Lower primary" />
+                <KRadioButton label="Lower secondary" />
+                <KRadioButton label="Preschool" />
+                <KRadioButton label="Tertiary" />
+              </KRadioButtonGroup>
+            </div>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+      <AccordionContainer style="width: 600px">
+        <AccordionItem
+          title="Level"
+          :headerAppearanceOverrides="{
+            backgroundColor: '#ECF0FE',
+            borderColor: '#4368F5',
+            borderLeft: '4px solid #4368F5',
+          }"
+        >
+          <template #content>
+            <div>
+              <KRadioButtonGroup>
+                <KRadioButton label="Lower primary" />
+                <KRadioButton label="Lower secondary" />
+                <KRadioButton label="Preschool" />
+                <KRadioButton label="Tertiary" />
+              </KRadioButtonGroup>
+            </div>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+    </KPageContainer>
+    <KPageContainer>
+      <h2>Test 5</h2>
+      <AccordionContainer style="width: 600px; margin-bottom: 32px">
+        <AccordionItem
+          title="Category"
+          :headerAppearanceOverrides="{
+            backgroundColor: $themePalette.grey.v_50,
+            borderBottom: `1px solid ${$themeTokens.fineLine}`,
+          }"
+          :contentAppearanceOverrides="{
+            padding: '0',
+          }"
+        >
+          <template #content>
+            <AccordionContainer style="padding: 0; box-shadow: none">
+              <AccordionItem
+                title="School"
+                style="padding: 0; border: 0"
+              >
+                <template #leading-actions>
+                  <KIcon
+                    icon="skillsResource"
+                    style="margin-right: 10px"
+                    color="blue"
+                  />
+                </template>
+                <template #content>
+                  <span> Some content here</span>
+                </template>
+              </AccordionItem>
+              <AccordionItem
+                title="Basic skills"
+                style="padding: 0; border: 0"
+              >
+                <template #leading-actions>
+                  <KIcon
+                    icon="mathematicsResource"
+                    style="margin-right: 10px"
+                    color="blue"
+                  />
+                </template>
+                <template #content>
+                  <span> Some content here</span>
+                </template>
+              </AccordionItem>
+            </AccordionContainer>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+    </KPageContainer>
+    <KPageContainer>
+      <h2>Test 6</h2>
+      <AccordionContainer style="width: 600px">
+        <AccordionItem
+          title="Category"
+          disabled
+          :headerAppearanceOverrides="{
+            backgroundColor: $themePalette.grey.v_50,
+            borderBottom: `1px solid ${$themeTokens.fineLine}`,
+          }"
+        >
+          <template #content> Some content here </template>
+        </AccordionItem>
+      </AccordionContainer>
+    </KPageContainer>
+  </AppBarPage>
+
+</template>
+
+
+<script>
+
+  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
+  import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
+  import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
+
+  export default {
+    name: 'Playground',
+    components: {
+      AppBarPage,
+      AccordionContainer,
+      AccordionItem,
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .inner-content-1 {
+    padding: 10px;
+    border-top: 1px solid;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/accordion/AccordionContainer.vue b/packages/kolibri-common/components/accordion/AccordionContainer.vue
new file mode 100644
index 00000000000..b9517405669
--- /dev/null
+++ b/packages/kolibri-common/components/accordion/AccordionContainer.vue
@@ -0,0 +1,79 @@
+<template>
+
+  <div class="accordion">
+    <div
+      v-if="$slots.header"
+      class="header"
+      :style="{
+        borderColor: $themeTokens.fineLine,
+        backgroundColor: $themePalette.grey.v_50,
+        ...headerAppearanceOverrides,
+      }"
+    >
+      <slot name="header"></slot>
+    </div>
+    <!-- <KGrid
+      v-if="!hideTopActions"
+      :style="{
+        backgroundColor: $themePalette.grey.v_100,
+      }"
+    >
+      <KGridItem
+        :layout4="{ span: 2 }"
+        :layout8="{ span: 4 }"
+        :layout12="{ span: 6 }"
+        class="header-actions"
+      >
+        <div class="header-left-actions">
+          <slot name="left-actions"></slot>
+        </div>
+      </KGridItem>
+      <KGridItem
+        :layout4="{ span: 2 }"
+        :layout8="{ span: 4 }"
+        :layout12="{ span: 6 }"
+        class="header-actions"
+      >
+        <div class="header-right-actions">
+          <slot name="right-actions"></slot>
+        </div>
+      </KGridItem>
+    </KGrid> -->
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'AccordionContainer',
+    props: {
+      headerAppearanceOverrides: {
+        type: [Object, String],
+        default: null,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .accordion {
+    @extend %dropshadow-1dp;
+  }
+
+  .header {
+    padding: 10px;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
new file mode 100644
index 00000000000..e9e1a103b87
--- /dev/null
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -0,0 +1,137 @@
+<template>
+
+  <div
+    class="accordion-item"
+    :class="{
+      disabled,
+    }"
+    :style="{
+      borderColor: $themeTokens.fineLine + '!important',
+    }"
+  >
+    <h3 class="header-wrapper">
+      <button
+        class="header"
+        :style="headerAppearanceOverrides"
+        @click="toggle"
+      >
+        <div class="header-content">
+          <div class="d-flex">
+            <div
+              v-if="$slots['leading-actions']"
+              class="leading-actions"
+            >
+              <slot name="leading-actions"></slot>
+            </div>
+            <span>
+              {{ title }}
+            </span>
+          </div>
+          <div class="trailing-actions">
+            <KIconButton
+              icon="chevronDown"
+              @click="toggle"
+            />
+            <slot name="trailing-actions"></slot>
+          </div>
+        </div>
+      </button>
+    </h3>
+    <div
+      v-if="isExpanded"
+      class="content"
+      :style="contentAppearanceOverrides"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'AccordionItem',
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      headerAppearanceOverrides: {
+        type: [Object, String],
+        default: null,
+      },
+      contentAppearanceOverrides: {
+        type: [Object, String],
+        default: null,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      isExpanded() {
+        return !this.disabled;
+      },
+    },
+    methods: {
+      toggle() {
+        this.isExpanded;
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .accordion-item {
+    border-bottom: 1px solid;
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+  }
+
+  .header-wrapper {
+    margin: 0;
+
+    .header {
+      width: 100%;
+      padding: 10px;
+      background: unset;
+      border: 0;
+      outline-offset: 0;
+
+      .header-content {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .header-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    /deep/ .link-text {
+      display: none;
+    }
+  }
+
+  .content {
+    padding: 10px;
+  }
+
+  .d-flex {
+    display: flex;
+    align-items: center;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
new file mode 100644
index 00000000000..793c09f4de2
--- /dev/null
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -0,0 +1,81 @@
+import uniq from 'lodash/uniq';
+import { isRef, ref, computed } from 'kolibri.lib.vueCompositionApi';
+
+/**
+ * @param {Object} options
+ * @param {Array<Ref>} options.items - array of items in accordion
+ * @param {Function: int => bool} options.collapseGuard - function to determine if collapse is
+ *    allowed - when true, collapse is blocked
+ * @param {Function: int => bool} options.expandGuard - function to determine if expand is allowed
+ *  - when true, expand is blocked
+ */
+export default function useAccordion(items) {
+  if (!isRef(items)) {
+    throw new Error('items is required and must be reactive value');
+  }
+
+  const _expandedIndexes = ref([]);
+
+  function toggle(index) {
+    if (_expandedIndexes.value.includes(index)) {
+      collapse(index);
+    } else {
+      expand(index);
+    }
+  }
+
+  function expand(index) {
+    _expandedIndexes.value = uniq([..._expandedIndexes.value, index]);
+  }
+
+  function collapse(index) {
+    _expandedIndexes.value = _expandedIndexes.value.filter(i => i !== index);
+  }
+
+  function collapseAll() {
+    _expandedIndexes.value = [];
+  }
+
+  function expandAll() {
+    _expandedIndexes.value = items.value.map((_, i) => i);
+  }
+
+  function isExpanded(index) {
+    return _expandedIndexes.value.includes(index);
+  }
+
+  const canExpandAll = computed(() => {
+    return items.value.length !== _expandedIndexes.value.length;
+  });
+
+  const canCollapseAll = computed(() => {
+    return _expandedIndexes.value.length > 0;
+  });
+
+  return {
+    canExpandAll,
+    canCollapseAll,
+    collapse,
+    collapseAll,
+    expand,
+    expandAll,
+    isExpanded,
+    toggle,
+  };
+}
+
+/**
+ * <KAccordion>
+ *   <KAccordionItem
+ *      v-for="(item, index) in items"
+ *      :isExpanded="isExpanded(index)"
+ *   >
+ *      <template #heading>
+ *        <h3 @click="toggle(index)">{{ item.title }}</h3>
+ *      </template>
+ *      <template #content>
+ *        <p v-if="isExpanded(index)">{{ item.content }}</p>
+ *      </template>
+ *   </KAccordionItem>
+ * </KAccordion>
+ */

From 9b4e26c432febff905d36f43376a1f14c0695c7d Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 2 Oct 2024 12:35:04 -0500
Subject: [PATCH 35/65] Add useAccordion composable

---
 .../coach/assets/src/views/Playground.vue     | 15 +++-
 .../accordion/AccordionContainer.vue          | 55 ++++++------
 .../components/accordion/AccordionItem.vue    | 30 ++++---
 .../components/accordion/useAccordion.js      | 86 ++++++++++++-------
 4 files changed, 113 insertions(+), 73 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/Playground.vue b/kolibri/plugins/coach/assets/src/views/Playground.vue
index b9343ae1ad0..93b1e89f986 100644
--- a/kolibri/plugins/coach/assets/src/views/Playground.vue
+++ b/kolibri/plugins/coach/assets/src/views/Playground.vue
@@ -59,10 +59,21 @@
     <KPageContainer>
       <h2>Test 2</h2>
       <AccordionContainer style="width: 600px">
-        <template #header>
+        <template #header="{ canExpandAll, expandAll, canCollapseAll, collapseAll }">
           <div style="display: flex; align-items: center; justify-content: space-between">
             <KCheckbox label="Identify Molecular formulas" />
-            <KIconButton icon="expandAll" />
+            <div style="display: flex; align-items: center">
+              <KIconButton
+                icon="expandAll"
+                :disabled="!canExpandAll"
+                @click="expandAll"
+              />
+              <KIconButton
+                icon="collapseAll"
+                :disabled="!canCollapseAll"
+                @click="collapseAll"
+              />
+            </div>
           </div>
         </template>
         <template #default>
diff --git a/packages/kolibri-common/components/accordion/AccordionContainer.vue b/packages/kolibri-common/components/accordion/AccordionContainer.vue
index b9517405669..0d756630893 100644
--- a/packages/kolibri-common/components/accordion/AccordionContainer.vue
+++ b/packages/kolibri-common/components/accordion/AccordionContainer.vue
@@ -2,7 +2,7 @@
 
   <div class="accordion">
     <div
-      v-if="$slots.header"
+      v-if="hasHeaderSlot"
       class="header"
       :style="{
         borderColor: $themeTokens.fineLine,
@@ -10,37 +10,16 @@
         ...headerAppearanceOverrides,
       }"
     >
-      <slot name="header"></slot>
+      <slot
+        name="header"
+        :canExpandAll="canExpandAll"
+        :expandAll="expandAll"
+        :canCollapseAll="canCollapseAll"
+        :collapseAll="collapseAll"
+      ></slot>
     </div>
-    <!-- <KGrid
-      v-if="!hideTopActions"
-      :style="{
-        backgroundColor: $themePalette.grey.v_100,
-      }"
-    >
-      <KGridItem
-        :layout4="{ span: 2 }"
-        :layout8="{ span: 4 }"
-        :layout12="{ span: 6 }"
-        class="header-actions"
-      >
-        <div class="header-left-actions">
-          <slot name="left-actions"></slot>
-        </div>
-      </KGridItem>
-      <KGridItem
-        :layout4="{ span: 2 }"
-        :layout8="{ span: 4 }"
-        :layout12="{ span: 6 }"
-        class="header-actions"
-      >
-        <div class="header-right-actions">
-          <slot name="right-actions"></slot>
-        </div>
-      </KGridItem>
-    </KGrid> -->
     <div>
-      <slot></slot>
+      <slot name="default"></slot>
     </div>
   </div>
 
@@ -49,8 +28,24 @@
 
 <script>
 
+  import { computed } from 'kolibri.lib.vueCompositionApi';
+  import useAccordion from './useAccordion';
+
   export default {
     name: 'AccordionContainer',
+    setup(prop, { slots }) {
+      const { canExpandAll, canCollapseAll, collapseAll, expandAll } = useAccordion();
+
+      const hasHeaderSlot = computed(() => !!slots.header);
+
+      return {
+        hasHeaderSlot,
+        canExpandAll,
+        canCollapseAll,
+        collapseAll,
+        expandAll,
+      };
+    },
     props: {
       headerAppearanceOverrides: {
         type: [Object, String],
diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index e9e1a103b87..bb2d53115c4 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -13,7 +13,7 @@
       <button
         class="header"
         :style="headerAppearanceOverrides"
-        @click="toggle"
+        @click.stop="toggle"
       >
         <div class="header-content">
           <div class="d-flex">
@@ -30,7 +30,7 @@
           <div class="trailing-actions">
             <KIconButton
               icon="chevronDown"
-              @click="toggle"
+              @click.stop="toggle"
             />
             <slot name="trailing-actions"></slot>
           </div>
@@ -51,8 +51,22 @@
 
 <script>
 
+  import { v4 as uuidv4 } from 'uuid';
+  import { injectAccordionItem } from './useAccordion';
+
   export default {
     name: 'AccordionItem',
+    setup() {
+      const _uid = uuidv4();
+      const { registerItem, unregisterItem, toggle, isExpanded } = injectAccordionItem(_uid);
+
+      return {
+        registerItem,
+        unregisterItem,
+        toggle,
+        isExpanded,
+      };
+    },
     props: {
       title: {
         type: String,
@@ -71,15 +85,11 @@
         default: false,
       },
     },
-    computed: {
-      isExpanded() {
-        return !this.disabled;
-      },
+    mounted() {
+      this.registerItem();
     },
-    methods: {
-      toggle() {
-        this.isExpanded;
-      },
+    componentWillUnmount() {
+      this.unregisterItem();
     },
   };
 
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
index 793c09f4de2..e4c7c3c38b7 100644
--- a/packages/kolibri-common/components/accordion/useAccordion.js
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -1,69 +1,93 @@
 import uniq from 'lodash/uniq';
-import { isRef, ref, computed } from 'kolibri.lib.vueCompositionApi';
+import { ref, computed, provide, inject } from 'kolibri.lib.vueCompositionApi';
 
-/**
- * @param {Object} options
- * @param {Array<Ref>} options.items - array of items in accordion
- * @param {Function: int => bool} options.collapseGuard - function to determine if collapse is
- *    allowed - when true, collapse is blocked
- * @param {Function: int => bool} options.expandGuard - function to determine if expand is allowed
- *  - when true, expand is blocked
- */
-export default function useAccordion(items) {
-  if (!isRef(items)) {
-    throw new Error('items is required and must be reactive value');
+export default function useAccordion() {
+  const _items = ref([]);
+  const _expandedItems = ref([]);
+
+  function registerItem(uid) {
+    _items.value.push(uid);
   }
 
-  const _expandedIndexes = ref([]);
+  function unregisterItem(uid) {
+    _items.value = _items.value.filter(v => v !== uid);
+  }
 
-  function toggle(index) {
-    if (_expandedIndexes.value.includes(index)) {
-      collapse(index);
+  function toggle(uid) {
+    if (_expandedItems.value.includes(uid)) {
+      collapse(uid);
     } else {
-      expand(index);
+      expand(uid);
     }
   }
 
-  function expand(index) {
-    _expandedIndexes.value = uniq([..._expandedIndexes.value, index]);
+  function expand(uid) {
+    _expandedItems.value = uniq([..._expandedItems.value, uid]);
   }
 
-  function collapse(index) {
-    _expandedIndexes.value = _expandedIndexes.value.filter(i => i !== index);
+  function collapse(uid) {
+    _expandedItems.value = _expandedItems.value.filter(value => value !== uid);
   }
 
   function collapseAll() {
-    _expandedIndexes.value = [];
+    _expandedItems.value = [];
   }
 
   function expandAll() {
-    _expandedIndexes.value = items.value.map((_, i) => i);
+    _expandedItems.value = [..._items.value];
   }
 
-  function isExpanded(index) {
-    return _expandedIndexes.value.includes(index);
+  function isExpanded(uid) {
+    return _expandedItems.value.includes(uid);
   }
 
   const canExpandAll = computed(() => {
-    return items.value.length !== _expandedIndexes.value.length;
+    return _items.value.length !== _expandedItems.value.length;
   });
 
   const canCollapseAll = computed(() => {
-    return _expandedIndexes.value.length > 0;
+    return _expandedItems.value.length > 0;
   });
 
+  provide('accordion_registerItem', registerItem);
+  provide('accordion_unregisterItem', unregisterItem);
+  provide('accordion_toggle', toggle);
+  provide('accordion_isExpanded', isExpanded);
+
   return {
     canExpandAll,
     canCollapseAll,
-    collapse,
     collapseAll,
-    expand,
     expandAll,
-    isExpanded,
-    toggle,
   };
 }
 
+export function injectAccordionItem(uid) {
+  const _registerItem = inject('accordion_registerItem');
+  function registerItem() {
+    return _registerItem(uid);
+  }
+
+  const _unregisterItem = inject('accordion_unregisterItem');
+  function unregisterItem() {
+    return _unregisterItem(uid);
+  }
+
+  const _toggle = inject('accordion_toggle');
+  function toggle() {
+    return _toggle(uid);
+  }
+
+  const _isExpanded = inject('accordion_isExpanded');
+  const isExpanded = computed(() => _isExpanded(uid));
+
+  return {
+    registerItem,
+    unregisterItem,
+    toggle,
+    isExpanded,
+  };
+}
 /**
  * <KAccordion>
  *   <KAccordionItem

From 522196994aaf7a80cbe4ca57d789f4ed06eaf8e7 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 2 Oct 2024 15:31:03 -0500
Subject: [PATCH 36/65] Update draggabl accordions in createquizsection

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 233 +++++-------------
 .../components/accordion/AccordionItem.vue    |  18 +-
 2 files changed, 83 insertions(+), 168 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index d11055f6be7..9b2f406725e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -168,43 +168,48 @@
           </KGridItem>
         </KGrid>
 
-        <AccordionContainer :items="activeQuestions">
-          <template #left-actions>
-            <KCheckbox
-              ref="selectAllCheckbox"
-              class="select-all-box"
-              :label="selectAllLabel$()"
-              :checked="allQuestionsSelected"
-              :indeterminate="selectAllIsIndeterminate"
-              @change="() => selectAllQuestions()"
-            />
-          </template>
-          <template #right-actions>
-            <KIconButton
-              icon="expandAll"
-              :tooltip="expandAll$()"
-              :disabled="!canExpandAll"
-              @click="expandAll"
-            />
-            <KIconButton
-              icon="collapseAll"
-              :tooltip="collapseAll$()"
-              :disabled="!canCollapseAll"
-              @click="collapseAll"
-            />
-            <KIconButton
-              icon="refresh"
-              :tooltip="replaceAction$()"
-              :disabled="!canReplaceQuestions"
-              @click="handleReplaceSelection()"
-            />
-            <KIconButton
-              icon="trash"
-              :tooltip="coreString('deleteAction')"
-              :aria-label="coreString('deleteAction')"
-              :disabled="selectedActiveQuestions.length === 0"
-              @click="() => deleteQuestions()"
-            />
+        <AccordionContainer>
+          <template #header="{ canExpandAll, expandAll, canCollapseAll, collapseAll }">
+            <div style="display: flex; align-items: center; justify-content: space-between">
+              <div>
+                <KCheckbox
+                  ref="selectAllCheckbox"
+                  class="select-all-box"
+                  :label="selectAllLabel$()"
+                  :checked="allQuestionsSelected"
+                  :indeterminate="selectAllIsIndeterminate"
+                  @change="() => selectAllQuestions()"
+                  @click.stop="() => {}"
+                />
+              </div>
+              <div style="display: flex; align-items: center">
+                <KIconButton
+                  icon="expandAll"
+                  :tooltip="expandAll$()"
+                  :disabled="!canExpandAll"
+                  @click="expandAll"
+                />
+                <KIconButton
+                  icon="collapseAll"
+                  :tooltip="collapseAll$()"
+                  :disabled="!canCollapseAll"
+                  @click="collapseAll"
+                />
+                <KIconButton
+                  icon="refresh"
+                  :tooltip="replaceAction$()"
+                  :disabled="!canReplaceQuestions"
+                  @click="handleReplaceSelection()"
+                />
+                <KIconButton
+                  icon="trash"
+                  :tooltip="coreString('deleteAction')"
+                  :aria-label="coreString('deleteAction')"
+                  :disabled="selectedActiveQuestions.length === 0"
+                  @click="() => deleteQuestions()"
+                />
+              </div>
+            </div>
           </template>
 
           <DragContainer
@@ -225,55 +230,35 @@
                 style="background: white"
               >
                 <AccordionItem
-                  :id="question.item"
                   :title="
                     displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)
                   "
                   :aria-selected="selectedActiveQuestions.includes(question.item)"
                 >
-                  <template #heading="{ title }">
-                    <h3 class="accordion-header">
-                      <DragHandle>
-                        <div>
-                          <DragSortWidget
-                            class="sort-widget"
-                            moveUpText="up"
-                            moveDownText="down"
-                            :noDrag="true"
-                            :isFirst="index === 0"
-                            :isLast="index === activeQuestions.length - 1"
-                            @moveUp="() => handleKeyboardDragUp(index, activeQuestions)"
-                            @moveDown="() => handleKeyboardDragDown(index, activeQuestions)"
-                          />
-                        </div>
-                      </DragHandle>
-                      <KCheckbox
-                        class="accordion-item-checkbox"
-                        :checked="selectedActiveQuestions.includes(question.item)"
-                        @change="() => toggleQuestionInSelection(question.item)"
-                      />
-                      <KButton
-                        tabindex="0"
-                        appearance="basic-link"
-                        :style="accordionStyleOverrides"
-                        class="accordion-header-label"
-                        :aria-expanded="isExpanded(index)"
-                        :aria-controls="`question-panel-${question.item}`"
-                        @click="toggle(index)"
-                      >
-                        <span>{{ title }}</span>
-                        <KIcon
-                          class="chevron-icon"
-                          :icon="isExpanded(index) ? 'chevronUp' : 'chevronRight'"
+                  <template #leading-actions>
+                    <DragHandle>
+                      <div>
+                        <DragSortWidget
+                          class="sort-widget"
+                          moveUpText="up"
+                          moveDownText="down"
+                          :noDrag="true"
+                          :isFirst="index === 0"
+                          :isLast="index === activeQuestions.length - 1"
+                          @moveUp="() => handleKeyboardDragUp(index, activeQuestions)"
+                          @moveDown="() => handleKeyboardDragDown(index, activeQuestions)"
                         />
-                      </KButton>
-                    </h3>
+                      </div>
+                    </DragHandle>
+                    <KCheckbox
+                      class="accordion-item-checkbox"
+                      :checked="selectedActiveQuestions.includes(question.item)"
+                      @change="() => toggleQuestionInSelection(question.item)"
+                    />
                   </template>
                   <template #content>
                     <div
-                      v-if="isExpanded(index)"
                       :id="`question-panel-${question.item}`"
-                      :ref="`question-panel-${question.item}`"
                       :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
                     >
                       <ContentRenderer
@@ -336,9 +321,8 @@
   import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
-  import AccordionItem from 'kolibri-common/components/AccordionItem';
-  import AccordionContainer from 'kolibri-common/components/AccordionContainer';
-  import useAccordion from 'kolibri-common/components/useAccordion';
+  import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
+  import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
@@ -407,32 +391,12 @@
         selectedActiveQuestions,
       } = injectQuizCreation();
 
-      const {
-        collapse,
-        collapseAll,
-        expand,
-        expandAll,
-        isExpanded,
-        toggle,
-        canCollapseAll,
-        canExpandAll,
-      } = useAccordion(activeQuestions);
-
       const { moveUpOne, moveDownOne } = useDrag();
       const dragActive = ref(false);
 
       const { createSnackbar } = useSnackbar();
 
       return {
-        canCollapseAll,
-        canExpandAll,
-        collapse,
-        collapseAll,
-        expand,
-        expandAll,
-        isExpanded,
-        toggle,
-
         dragActive,
         sectionLabel$,
         expandAll$,
@@ -489,14 +453,6 @@
       };
     },
     computed: {
-      accordionStyleOverrides() {
-        return {
-          color: this.$themeTokens.text + '!important',
-          textDecoration: 'none',
-          // Ensure text doesn't get highlighted as we drag
-          userSelect: this.dragActive ? 'none!important' : 'text',
-        };
-      },
       canReplaceQuestions() {
         return (
           this.selectedActiveQuestions.length > 0 &&
@@ -698,15 +654,6 @@
 
 <style lang="scss" scoped>
 
-  .no-question-layout {
-    width: auto;
-    padding: 40px;
-    text-align: center;
-    background-color: #fafafa;
-    border: 1px;
-    border-radius: 0.5em;
-  }
-
   .question-mark-layout {
     width: 2.5em;
     height: 2.5em;
@@ -718,18 +665,6 @@
   .help-icon-style {
     font-size: 1.5em;
     font-weight: 700;
-    color: #996189;
-  }
-
-  .kgrid-alignment-style {
-    padding-right: 1em;
-    padding-left: 0;
-    text-align: left;
-  }
-
-  .left-column-alignment-style {
-    display: inline-flex;
-    margin-left: 1em;
   }
 
   .drag-icon {
@@ -737,12 +672,6 @@
     font-size: 1em;
   }
 
-  .float-item-left-style {
-    float: right;
-    margin-top: 1em;
-    margin-right: 0.5em;
-  }
-
   .reduce-chervon-spacing {
     padding: 0;
     margin: 0;
@@ -831,38 +760,8 @@
     max-width: 25rem;
   }
 
-  .menu-button {
-    width: calc(100% - 40px);
-    max-width: calc(100% - 40px) !important;
-    min-height: 40px;
-  }
-
-  .accordion-header {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: 0 0.5em !important;
-    margin: 0.25em 0;
-
-    .accordion-item-checkbox {
-      margin-left: 0.5em;
-    }
-
-    .chevron-icon {
-      position: absolute;
-      top: 0.92em;
-      right: 0;
-    }
-  }
-
-  .accordion-header-label {
-    position: relative;
-    flex-grow: 1;
-    align-self: stretch;
-    padding: 0 0 0 1em;
-    line-height: 2.75em;
-    text-align: left;
-    cursor: pointer;
+  .accordion-item-checkbox {
+    margin-left: 0.5em;
   }
 
   /deep/ .checkbox-icon {
@@ -880,7 +779,7 @@
   .select-all-box {
     margin-top: 0;
     margin-bottom: 0;
-    margin-left: 2.5em;
+    margin-left: 1.5em;
 
     // Vertical centering here into the KCheckbox
     /deep/ & label {
diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index bb2d53115c4..3e099a5bfa7 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -13,6 +13,8 @@
       <button
         class="header"
         :style="headerAppearanceOverrides"
+        :aria-expanded="isExpanded"
+        :aria-controls="contentId"
         @click.stop="toggle"
       >
         <div class="header-content">
@@ -29,7 +31,7 @@
           </div>
           <div class="trailing-actions">
             <KIconButton
-              icon="chevronDown"
+              :icon="isExpanded ? 'chevronDown' : 'chevronRight'"
               @click.stop="toggle"
             />
             <slot name="trailing-actions"></slot>
@@ -39,6 +41,7 @@
     </h3>
     <div
       v-if="isExpanded"
+      :id="contentId"
       class="content"
       :style="contentAppearanceOverrides"
     >
@@ -61,6 +64,7 @@
       const { registerItem, unregisterItem, toggle, isExpanded } = injectAccordionItem(_uid);
 
       return {
+        _uid,
         registerItem,
         unregisterItem,
         toggle,
@@ -85,6 +89,11 @@
         default: false,
       },
     },
+    computed: {
+      contentId() {
+        return `accordion-content-${this._uid}`;
+      },
+    },
     mounted() {
       this.registerItem();
     },
@@ -113,6 +122,8 @@
     .header {
       width: 100%;
       padding: 10px;
+      cursor: pointer;
+      user-select: text;
       background: unset;
       border: 0;
       outline-offset: 0;
@@ -125,6 +136,11 @@
     }
   }
 
+  .leading-actions {
+    display: flex;
+    align-items: center;
+  }
+
   .header-label {
     display: flex;
     align-items: center;

From 9ee19ebacf594c07154b115411f9f3011c7bcc2f Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 2 Oct 2024 16:29:54 -0500
Subject: [PATCH 37/65] Clean some code

---
 .../components/accordion/AccordionItem.vue    | 21 ++++---------------
 .../components/accordion/useAccordion.js      |  1 +
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index 3e099a5bfa7..a98c8417f36 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -18,7 +18,7 @@
         @click.stop="toggle"
       >
         <div class="header-content">
-          <div class="d-flex">
+          <div class="title-actions-wrapper">
             <div
               v-if="$slots['leading-actions']"
               class="leading-actions"
@@ -136,28 +136,15 @@
     }
   }
 
-  .leading-actions {
+  .leading-actions,
+  .trailing-actions,
+  .title-actions-wrapper {
     display: flex;
     align-items: center;
   }
 
-  .header-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    /deep/ .link-text {
-      display: none;
-    }
-  }
-
   .content {
     padding: 10px;
   }
 
-  .d-flex {
-    display: flex;
-    align-items: center;
-  }
-
 </style>
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
index e4c7c3c38b7..c0f6780f053 100644
--- a/packages/kolibri-common/components/accordion/useAccordion.js
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -11,6 +11,7 @@ export default function useAccordion() {
 
   function unregisterItem(uid) {
     _items.value = _items.value.filter(v => v !== uid);
+    _expandedItems.value = _expandedItems.value.filter(v => v !== uid);
   }
 
   function toggle(uid) {

From 13aa97b11cc6e07e60ffa854807fb572a0315f00 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 3 Oct 2024 14:19:01 -0500
Subject: [PATCH 38/65] Remove dead code

---
 .../src/views/plan/QuizSummaryPage/index.vue  | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index f523d75f4c8..0f6b306355c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -86,10 +86,9 @@
 
 <script>
 
-  import { mapState, mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import find from 'lodash/find';
   import sortBy from 'lodash/sortBy';
-  import fromPairs from 'lodash/fromPairs';
   import { ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
   import CatchErrors from 'kolibri.utils.CatchErrors';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -151,20 +150,15 @@
           question_sources: [],
           title: '',
         },
-        selectedExercises: {},
         loading: true,
         currentAction: '',
         QUIZZES_TABS_ID,
         QuizzesTabs,
+        difficultQuestions: [],
       };
     },
     computed: {
       ...mapState(['classList']),
-      ...mapGetters('questionList', ['difficultQuestions']),
-
-      // quizIsRandomized() {
-      //   return !this.quiz.learners_see_fixed_order;
-      // },
       quizId() {
         return this.$route.params.quizId;
       },
@@ -184,11 +178,6 @@
       recipients() {
         return this.getLearnersForExam(this.exam);
       },
-      // orderDescriptionString() {
-      //   return this.quizIsRandomized
-      //     ? this.randomizedSectionOptionDescription$()
-      //     : this.fixedSectionOptionDescription$();
-      // },
       classId() {
         return this.$route.params.classId;
       },
@@ -259,9 +248,9 @@
     methods: {
       // @public
       setData(data) {
-        const { exam, exerciseContentNodes } = data;
+        const { exam, difficultQuestions } = data;
         this.quiz = exam;
-        this.selectedExercises = fromPairs(exerciseContentNodes.map(x => [x.id, x]));
+        this.difficultQuestions = difficultQuestions;
         this.loading = false;
         this.$store.dispatch('notLoading');
       },

From a006f884eef5efc613be9d8bcefbd8a2dbaa2c5e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 3 Oct 2024 14:20:11 -0500
Subject: [PATCH 39/65] Fetch difficult questions in quizsummarypage api

---
 kolibri/plugins/coach/api.py                  |  2 +-
 .../assets/src/modules/questionList/index.js  | 27 +--------
 .../coach/assets/src/routes/planExamRoutes.js |  2 -
 .../plugins/coach/assets/src/utils/index.js   | 27 +++++++++
 .../src/views/plan/QuizSummaryPage/api.js     | 57 +++++++++++++++----
 .../ReportsDifficultQuestionsTable.vue        | 14 ++++-
 6 files changed, 87 insertions(+), 42 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/utils/index.js

diff --git a/kolibri/plugins/coach/api.py b/kolibri/plugins/coach/api.py
index f640a15512a..2cf5a947254 100644
--- a/kolibri/plugins/coach/api.py
+++ b/kolibri/plugins/coach/api.py
@@ -324,7 +324,7 @@ def has_permission(self, request, view):
             return False
         try:
             collection = Exam.objects.get(id=exam_id).collection
-        except Exam.DoesNotExist:
+        except (Exam.DoesNotExist, ValueError):
             return False
         allowed_roles = [role_kinds.ADMIN, role_kinds.COACH]
         try:
diff --git a/kolibri/plugins/coach/assets/src/modules/questionList/index.js b/kolibri/plugins/coach/assets/src/modules/questionList/index.js
index 6695a7ef8dd..0149226d06b 100644
--- a/kolibri/plugins/coach/assets/src/modules/questionList/index.js
+++ b/kolibri/plugins/coach/assets/src/modules/questionList/index.js
@@ -1,3 +1,4 @@
+import { getDifficultQuestions } from '../../utils';
 import * as actions from './actions';
 
 function defaultState() {
@@ -8,37 +9,13 @@ function defaultState() {
   };
 }
 
-function ratio(stat) {
-  return stat.correct / stat.total;
-}
-
 export default {
   namespaced: true,
   state: defaultState(),
   actions,
   getters: {
     difficultQuestions(state) {
-      return state.itemStats
-        .filter(stat => {
-          // Arbitrarily filter out questions that have higher than 80% correct rate
-          return stat.correct / stat.total < 0.8;
-        })
-        .sort((stat1, stat2) => {
-          // Sort first by raw correct
-          if (ratio(stat1) > ratio(stat2)) {
-            return 1;
-          } else if (ratio(stat2) > ratio(stat1)) {
-            return -1;
-            // If they are equal, prioritize questions in which we have the highest
-            // number of answers
-          } else if (stat1.total > stat2.total) {
-            return -1;
-          } else if (stat2.total > stat1.total) {
-            return 1;
-          }
-          // Nothing between them!
-          return 0;
-        });
+      return getDifficultQuestions(state.itemStats);
     },
   },
   mutations: {
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index ff0f1a3b83a..d5f1a26077b 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -6,7 +6,6 @@ import ReplaceQuestions from '../views/plan/CreateExamPage/ReplaceQuestions.vue'
 import CoachExamsPage from '../views/plan/CoachExamsPage';
 import QuizSummaryPage from '../views/plan/QuizSummaryPage';
 import SectionOrder from '../views/plan/CreateExamPage/SectionOrder';
-import { generateQuestionListHandler } from '../modules/questionList/handlers';
 
 export default [
   {
@@ -56,7 +55,6 @@ export default [
     name: QuizSummaryPage.name,
     path: '/:classId/plan/quizzes/:quizId/:tabId?',
     component: QuizSummaryPage,
-    handler: generateQuestionListHandler(['quizId']),
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
     },
diff --git a/kolibri/plugins/coach/assets/src/utils/index.js b/kolibri/plugins/coach/assets/src/utils/index.js
new file mode 100644
index 00000000000..ebcfa0bcd7c
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/utils/index.js
@@ -0,0 +1,27 @@
+const ratio = question => {
+  return question.correct / question.total;
+};
+
+export const getDifficultQuestions = questions => {
+  return questions
+    .filter(question => {
+      // Arbitrarily filter out questions that have higher than 80% correct rate
+      return question.correct / question.total < 0.8;
+    })
+    .sort((question1, question2) => {
+      // Sort first by raw correct
+      if (ratio(question1) > ratio(question2)) {
+        return 1;
+      } else if (ratio(question2) > ratio(question1)) {
+        return -1;
+        // If they are equal, prioritize questions in which we have the highest
+        // number of answers
+      } else if (question1.total > question2.total) {
+        return -1;
+      } else if (question2.total > question1.total) {
+        return 1;
+      }
+      // Nothing between them!
+      return 0;
+    });
+};
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
index 69e97909ea6..39378bab9d9 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
@@ -1,17 +1,52 @@
 import { fetchExamWithContent } from 'kolibri.utils.exams';
 import { ExamResource } from 'kolibri.resources';
+import QuizDifficulties from '../../../apiResources/quizDifficulties';
+import { getDifficultQuestions } from '../../../utils';
 
-export function fetchQuizSummaryPageData(examId) {
-  return ExamResource.fetchModel({ id: examId })
-    .then(exam => {
-      return fetchExamWithContent(exam);
-    })
-    .then(({ exam, exercises }) => {
-      return {
-        exerciseContentNodes: exercises,
-        exam,
-      };
-    });
+const fetchDifficultQuestions = async exam => {
+  if (exam.draft) {
+    return [];
+  }
+  const correctnessStats = await QuizDifficulties.fetchDetailCollection(
+    'detail',
+    exam.id,
+    undefined,
+    true,
+  );
+
+  const allQuestions = exam.question_sources.reduce((qs, section) => {
+    qs = [...qs, ...section.questions];
+
+    return qs;
+  }, []);
+
+  allQuestions.forEach(question => {
+    const questionStats = correctnessStats.find(stat => stat.item === question.item);
+    if (questionStats) {
+      question.correct = questionStats.correct;
+      question.total = questionStats.total;
+    } else {
+      question.correct = 0;
+      question.total = correctnessStats[0]?.total || 0;
+    }
+    question.questionNumber = question.counter_in_exercise;
+  });
+
+  return getDifficultQuestions(allQuestions);
+};
+
+export async function fetchQuizSummaryPageData(examId) {
+  const _exam = await ExamResource.fetchModel({ id: examId });
+
+  const { exam, exercises } = await fetchExamWithContent(_exam);
+
+  const difficultQuestions = await fetchDifficultQuestions(exam);
+
+  return {
+    exam,
+    exerciseContentNodes: exercises,
+    difficultQuestions,
+  };
 }
 
 export function serverAssignmentPayload(listOfIDs, classId) {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
index 214608b8d55..870ad50cdf7 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -15,10 +15,10 @@
           :key="tableRow.item + index"
         >
           <td>
-            <span v-if="$isPrint">{{ tableRow.title }}</span>
+            <span v-if="$isPrint">{{ getQuestionTitle(tableRow) }}</span>
             <KRouterLink
               v-if="!exam.missing_resource"
-              :text="tableRow.title"
+              :text="getQuestionTitle(tableRow)"
               :to="questionLink(tableRow.item)"
               icon="question"
             />
@@ -57,12 +57,14 @@
     },
     mixins: [commonCoach],
     setup() {
-      const { questionListEmptyState$, questionLabel$, helpNeededLabel$ } = coachStrings;
+      const { questionListEmptyState$, questionLabel$, helpNeededLabel$, nthExerciseName$ } =
+        coachStrings;
 
       return {
         questionListEmptyState$,
         questionLabel$,
         helpNeededLabel$,
+        nthExerciseName$,
       };
     },
     props: {
@@ -91,6 +93,12 @@
           },
         );
       },
+      getQuestionTitle(question) {
+        return this.nthExerciseName$({
+          name: question.title,
+          number: question.questionNumber,
+        });
+      },
       /**
        * @public
        */

From d9e03fb2a07fdd9e90c4d20e1ffddb9183b67d2c Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Wed, 9 Oct 2024 00:36:09 +0530
Subject: [PATCH 40/65] updated notificationsRoot.spec.js test file as per the
 changes made in its component file

---
 .../assets/src/state/modules/core/actions.js   |  2 --
 .../assets/src/views/NotificationsRoot.vue     | 18 +++++++-----------
 .../test/views/NotificationsRoot.spec.js       |  5 +++--
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index fbaba715e16..c9007dbb8ad 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -14,8 +14,6 @@ import redirectBrowser from 'kolibri.utils.redirectBrowser';
 import CatchErrors from 'kolibri.utils.CatchErrors';
 import Vue from 'kolibri.lib.vue';
 import Lockr from 'lockr';
-import { get } from '@vueuse/core';
-import useUser from 'kolibri.coreVue.composables.useUser';
 import {
   DisconnectionErrorCodes,
   LoginErrors,
diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 68a0804909f..487d9105e04 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
@@ -36,18 +35,12 @@
       @submit="dismissUpdateModal"
     />
   </div>
-
 </template>
 
-
 <script>
-
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import {
-    FacilityResource,
-    FacilityDatasetResource,
-    UserSyncStatusResource,
     PingbackNotificationResource,
     PingbackNotificationDismissedResource,
   } from 'kolibri.resources';
@@ -70,11 +63,12 @@
       UpdateNotification,
     },
     setup() {
-      const { isAdmin, isSuperuser } = useUser();
+      const { isAdmin, isSuperuser, user_id } = useUser();
 
       return {
         isAdmin,
         isSuperuser,
+        user_id,
       };
     },
     props: {
@@ -160,6 +154,7 @@
     created() {
       this.getNotifications();
     },
+
     methods: {
       async getNotifications() {
         const { isAdmin, isSuperuser } = useUser();
@@ -177,7 +172,7 @@
         try {
           await PingbackNotificationDismissedResource.saveModel({
             data: {
-              user: user_id,
+              user: this.user_id,
               notification: notificationId,
             },
           });
@@ -190,6 +185,9 @@
         if (this.notifications.length === 0) {
           this.notificationModalShown = false;
           Lockr.set(UPDATE_MODAL_DISMISSED, true);
+        } else {
+          // Call saveDismissedNotification for the most recent notification
+          this.saveDismissedNotification(this.mostRecentNotification.id);
         }
       },
       dispatchError(error) {
@@ -213,8 +211,6 @@
       i18n: notification.i18n,
     }));
   }
-
 </script>
 
-
 <style lang="scss" scoped></style>
diff --git a/kolibri/core/assets/test/views/NotificationsRoot.spec.js b/kolibri/core/assets/test/views/NotificationsRoot.spec.js
index 92aed531b73..d554e0e6bbc 100644
--- a/kolibri/core/assets/test/views/NotificationsRoot.spec.js
+++ b/kolibri/core/assets/test/views/NotificationsRoot.spec.js
@@ -6,6 +6,7 @@ import { coreStoreFactory as makeStore } from '../../src/state/store';
 import coreModule from '../../src/state/modules/core';
 
 jest.mock('kolibri.coreVue.composables.useUser');
+jest.mock('kolibri.resources');
 
 function makeWrapper(useUserMockObj = null) {
   const store = makeStore();
@@ -72,7 +73,7 @@ describe('NotificationsRoot', function () {
     it('notification modal should be rendered if the user is an admin/superuser, a notification exists, and there is a recent notification', async () => {
       const { wrapper, store } = makeWrapper({ isAdmin: true, isSuperuser: true });
       store.state.core.loading = false;
-      store.state.core.notifications = [
+      wrapper.vm.notifications = [
         {
           id: 2,
           title: 'title',
@@ -90,7 +91,7 @@ describe('NotificationsRoot', function () {
       const { wrapper, store } = makeWrapper();
       store.commit('CORE_SET_SESSION', { kind: [UserKinds.ADMIN] });
       store.state.core.loading = false;
-      store.state.core.notifications = [];
+      wrapper.vm.notifications = [];
       await wrapper.vm.$nextTick();
 
       expect(wrapper.findComponent({ name: 'UpdateNotification' }).exists()).toBeFalsy();

From 094e8e7af02f31d0c0c961549f34adc784646472 Mon Sep 17 00:00:00 2001
From: iamshobhraj <iamshobhraj@gmail.com>
Date: Wed, 9 Oct 2024 00:49:12 +0530
Subject: [PATCH 41/65] updated notificationsRoot.spec.js test file as per the
 changes made in its component file

---
 kolibri/core/assets/src/views/NotificationsRoot.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/core/assets/src/views/NotificationsRoot.vue b/kolibri/core/assets/src/views/NotificationsRoot.vue
index 487d9105e04..2f3adabd88a 100644
--- a/kolibri/core/assets/src/views/NotificationsRoot.vue
+++ b/kolibri/core/assets/src/views/NotificationsRoot.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div>
     <AppBarPage v-if="!loading && notAuthorized">
       <KPageContainer>
@@ -35,9 +36,12 @@
       @submit="dismissUpdateModal"
     />
   </div>
+
 </template>
 
+
 <script>
+
   import { mapState } from 'vuex';
   import Lockr from 'lockr';
   import {
@@ -168,7 +172,6 @@
         }
       },
       async saveDismissedNotification(notificationId) {
-        const { user_id } = useUser();
         try {
           await PingbackNotificationDismissedResource.saveModel({
             data: {
@@ -186,7 +189,6 @@
           this.notificationModalShown = false;
           Lockr.set(UPDATE_MODAL_DISMISSED, true);
         } else {
-          // Call saveDismissedNotification for the most recent notification
           this.saveDismissedNotification(this.mostRecentNotification.id);
         }
       },
@@ -211,6 +213,8 @@
       i18n: notification.i18n,
     }));
   }
+
 </script>
 
+
 <style lang="scss" scoped></style>

From 2945fa9e802acbbbfa481bd90a0f2ff90278e166 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 8 Oct 2024 14:53:44 -0700
Subject: [PATCH 42/65] Update index.js: remove playground routes

---
 kolibri/plugins/coach/assets/src/routes/index.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/routes/index.js b/kolibri/plugins/coach/assets/src/routes/index.js
index a922920b181..b6a6a915312 100644
--- a/kolibri/plugins/coach/assets/src/routes/index.js
+++ b/kolibri/plugins/coach/assets/src/routes/index.js
@@ -11,7 +11,6 @@ import HomeActivityPage from '../views/home/HomeActivityPage';
 import StatusTestPage from '../views/common/status/StatusTestPage';
 import { ClassesPageNames } from '../../../../learn/assets/src/constants';
 import { PageNames } from '../constants';
-import Playground from '../views/Playground.vue';
 import reportRoutes from './reportRoutes';
 import planRoutes from './planRoutes';
 import { classIdParamRequiredGuard } from './utils';
@@ -117,13 +116,6 @@ export default [
       store.dispatch('notLoading');
     },
   },
-  {
-    path: '/playground',
-    component: Playground,
-    handler() {
-      store.dispatch('notLoading');
-    },
-  },
   {
     path: '/',
     // Redirect to AllFacilitiesPage if a superuser and device has > 1 facility

From cbd3d10a500a702815eb79613ad7bce3cb59698c Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 8 Oct 2024 14:53:59 -0700
Subject: [PATCH 43/65] Delete
 kolibri/plugins/coach/assets/src/views/Playground.vue

---
 .../coach/assets/src/views/Playground.vue     | 338 ------------------
 1 file changed, 338 deletions(-)
 delete mode 100644 kolibri/plugins/coach/assets/src/views/Playground.vue

diff --git a/kolibri/plugins/coach/assets/src/views/Playground.vue b/kolibri/plugins/coach/assets/src/views/Playground.vue
deleted file mode 100644
index 93b1e89f986..00000000000
--- a/kolibri/plugins/coach/assets/src/views/Playground.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-
-  <AppBarPage>
-    <KPageContainer>
-      <h2>Test 1</h2>
-      <AccordionContainer style="width: 600px">
-        <template #header>
-          <div style="display: flex; align-items: center; justify-content: space-between">
-            <div>
-              <KIcon
-                icon="practiceSolid"
-                style="margin-right: 16px"
-              />
-              <span>Identify Molecular formulas</span>
-            </div>
-            <KIconButton icon="minus" />
-          </div>
-        </template>
-        <template #default>
-          <AccordionItem
-            title="What is the molecular formula for glucose?"
-            :contentAppearanceOverrides="{ paddingTop: 0 }"
-          >
-            <template #trailing-actions>
-              <KIconButton icon="minus" />
-            </template>
-            <template #content>
-              <div
-                class="inner-content-1"
-                :style="{
-                  borderColor: $themeTokens.fineLine,
-                }"
-              >
-                This is just some text inside
-              </div>
-            </template>
-          </AccordionItem>
-          <AccordionItem
-            title="What is the molecular formula for glucose?"
-            :contentAppearanceOverrides="{ paddingTop: 0 }"
-          >
-            <template #trailing-actions>
-              <KIconButton icon="minus" />
-            </template>
-            <template #content>
-              <div
-                class="inner-content-1"
-                :style="{
-                  borderColor: $themeTokens.fineLine,
-                }"
-              >
-                This is just some text inside
-              </div>
-            </template>
-          </AccordionItem>
-        </template>
-      </AccordionContainer>
-    </KPageContainer>
-    <KPageContainer>
-      <h2>Test 2</h2>
-      <AccordionContainer style="width: 600px">
-        <template #header="{ canExpandAll, expandAll, canCollapseAll, collapseAll }">
-          <div style="display: flex; align-items: center; justify-content: space-between">
-            <KCheckbox label="Identify Molecular formulas" />
-            <div style="display: flex; align-items: center">
-              <KIconButton
-                icon="expandAll"
-                :disabled="!canExpandAll"
-                @click="expandAll"
-              />
-              <KIconButton
-                icon="collapseAll"
-                :disabled="!canCollapseAll"
-                @click="collapseAll"
-              />
-            </div>
-          </div>
-        </template>
-        <template #default>
-          <AccordionItem
-            title="What is the molecular formula for glucose?"
-            :contentAppearanceOverrides="{ paddingTop: 0 }"
-          >
-            <template #leading-actions>
-              <KCheckbox />
-            </template>
-            <template #content>
-              <div
-                class="inner-content-1"
-                :style="{
-                  borderColor: $themeTokens.fineLine,
-                }"
-              >
-                This is just some text inside
-              </div>
-            </template>
-          </AccordionItem>
-          <AccordionItem
-            title="What is the molecular formula for glucose?"
-            :contentAppearanceOverrides="{ paddingTop: 0 }"
-          >
-            <template #leading-actions>
-              <KCheckbox />
-            </template>
-            <template #content>
-              <div
-                class="inner-content-1"
-                :style="{
-                  borderColor: $themeTokens.fineLine,
-                }"
-              >
-                This is just some text inside
-              </div>
-            </template>
-          </AccordionItem>
-        </template>
-      </AccordionContainer>
-    </KPageContainer>
-    <KPageContainer style="width: 300px">
-      <h2>Test 3</h2>
-      <AccordionContainer style="box-shadow: none">
-        <AccordionItem
-          title="Section 1 title"
-          style="border-bottom: 0"
-          :headerAppearanceOverrides="{
-            backgroundColor: $themePalette.grey.v_50,
-            padding: '8px 20px',
-            fontWeight: 700,
-            color: $themePalette.grey.v_600,
-          }"
-        >
-          <template #content>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightblue"
-                style="margin-right: 16px"
-              />
-              <span>Question 1</span>
-            </div>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightgray"
-                style="margin-right: 16px"
-              />
-              <span>Question 2</span>
-            </div>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightgray"
-                style="margin-right: 16px"
-              />
-              <span>Question 3</span>
-            </div>
-          </template>
-        </AccordionItem>
-        <AccordionItem
-          title="Section 2 title"
-          style="border-bottom: 0"
-          :headerAppearanceOverrides="{
-            backgroundColor: $themePalette.grey.v_50,
-            padding: '8px 20px',
-            fontWeight: 700,
-            color: $themePalette.grey.v_600,
-          }"
-        >
-          <template #content>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightblue"
-                style="margin-right: 16px"
-              />
-              <span>Question 1</span>
-            </div>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightgray"
-                style="margin-right: 16px"
-              />
-              <span>Question 2</span>
-            </div>
-            <div style="padding: 16px 8px">
-              <KIcon
-                icon="dot"
-                color="lightgray"
-                style="margin-right: 16px"
-              />
-              <span>Question 3</span>
-            </div>
-          </template>
-        </AccordionItem>
-      </AccordionContainer>
-    </KPageContainer>
-    <KPageContainer>
-      <h2>Test 4</h2>
-      <AccordionContainer style="width: 600px; margin-bottom: 32px">
-        <AccordionItem
-          title="Level"
-          :headerAppearanceOverrides="{
-            backgroundColor: '#ECF0FE',
-            borderColor: '#4368F5',
-            borderLeft: '4px solid #4368F5',
-          }"
-        >
-          <template #content>
-            <div>
-              <KRadioButtonGroup>
-                <KRadioButton label="Lower primary" />
-                <KRadioButton label="Lower secondary" />
-                <KRadioButton label="Preschool" />
-                <KRadioButton label="Tertiary" />
-              </KRadioButtonGroup>
-            </div>
-          </template>
-        </AccordionItem>
-      </AccordionContainer>
-      <AccordionContainer style="width: 600px">
-        <AccordionItem
-          title="Level"
-          :headerAppearanceOverrides="{
-            backgroundColor: '#ECF0FE',
-            borderColor: '#4368F5',
-            borderLeft: '4px solid #4368F5',
-          }"
-        >
-          <template #content>
-            <div>
-              <KRadioButtonGroup>
-                <KRadioButton label="Lower primary" />
-                <KRadioButton label="Lower secondary" />
-                <KRadioButton label="Preschool" />
-                <KRadioButton label="Tertiary" />
-              </KRadioButtonGroup>
-            </div>
-          </template>
-        </AccordionItem>
-      </AccordionContainer>
-    </KPageContainer>
-    <KPageContainer>
-      <h2>Test 5</h2>
-      <AccordionContainer style="width: 600px; margin-bottom: 32px">
-        <AccordionItem
-          title="Category"
-          :headerAppearanceOverrides="{
-            backgroundColor: $themePalette.grey.v_50,
-            borderBottom: `1px solid ${$themeTokens.fineLine}`,
-          }"
-          :contentAppearanceOverrides="{
-            padding: '0',
-          }"
-        >
-          <template #content>
-            <AccordionContainer style="padding: 0; box-shadow: none">
-              <AccordionItem
-                title="School"
-                style="padding: 0; border: 0"
-              >
-                <template #leading-actions>
-                  <KIcon
-                    icon="skillsResource"
-                    style="margin-right: 10px"
-                    color="blue"
-                  />
-                </template>
-                <template #content>
-                  <span> Some content here</span>
-                </template>
-              </AccordionItem>
-              <AccordionItem
-                title="Basic skills"
-                style="padding: 0; border: 0"
-              >
-                <template #leading-actions>
-                  <KIcon
-                    icon="mathematicsResource"
-                    style="margin-right: 10px"
-                    color="blue"
-                  />
-                </template>
-                <template #content>
-                  <span> Some content here</span>
-                </template>
-              </AccordionItem>
-            </AccordionContainer>
-          </template>
-        </AccordionItem>
-      </AccordionContainer>
-    </KPageContainer>
-    <KPageContainer>
-      <h2>Test 6</h2>
-      <AccordionContainer style="width: 600px">
-        <AccordionItem
-          title="Category"
-          disabled
-          :headerAppearanceOverrides="{
-            backgroundColor: $themePalette.grey.v_50,
-            borderBottom: `1px solid ${$themeTokens.fineLine}`,
-          }"
-        >
-          <template #content> Some content here </template>
-        </AccordionItem>
-      </AccordionContainer>
-    </KPageContainer>
-  </AppBarPage>
-
-</template>
-
-
-<script>
-
-  import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
-  import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
-  import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
-
-  export default {
-    name: 'Playground',
-    components: {
-      AppBarPage,
-      AccordionContainer,
-      AccordionItem,
-    },
-  };
-
-</script>
-
-
-<style scoped>
-
-  .inner-content-1 {
-    padding: 10px;
-    border-top: 1px solid;
-  }
-
-</style>

From 48c27a3cbef9e8920d79607215c1b5e248fcfd48 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 11 Oct 2024 14:01:21 -0400
Subject: [PATCH 44/65] Upgrade kds to rc7

---
 kolibri/core/package.json                     |  2 +-
 packages/kolibri-core-for-export/package.json |  2 +-
 yarn.lock                                     | 41 ++++---------------
 3 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index e48828c3a52..099a3d5a675 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.7",
-    "kolibri-design-system": "5.0.0-rc5",
+    "kolibri-design-system": "5.0.0-rc7",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.2",
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 5fc84465b2e..dcb6def7ae9 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.7",
-    "kolibri-design-system": "5.0.0-rc5",
+    "kolibri-design-system": "5.0.0-rc7",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.2",
diff --git a/yarn.lock b/yarn.lock
index 507f86571ef..f62830be73b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7778,13 +7778,13 @@ kolibri-constants@0.2.7:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.7.tgz#7441bff81c459e081eeb8125a741745a72a002d1"
   integrity sha512-gzAeXmFCFYxTlvQ4sPdyRdQzm0FTD/ydK8Q7zgqcnooFjwPHw+cov8xmy6OKn/eqF/87fxFAv54bdkmrghkIPQ==
 
-kolibri-design-system@5.0.0-rc5:
-  version "5.0.0-rc5"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc5.tgz#54daecb859d389a9deee49276d05ba14ebae15ab"
-  integrity sha512-Lam9bwSgKk7Dz6nblvnM/uA0H6BX7pPPGgXCRSyp7m7d9DasqrjArkhXuc5TopSjMfajn3hXzWNg4nhX/w33EQ==
+kolibri-design-system@5.0.0-rc7:
+  version "5.0.0-rc7"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc7.tgz#3a965b6a0ab9042f6e1ad754a6ebcdb5f1b89da6"
+  integrity sha512-30lp0aY7maWXX9nwVDTNM49ittwIQgSbViQNw9RS5DLEXLEyJc212pabIytEGidyxmhpVj4gUM/MdwyM606Mxg==
   dependencies:
     "@vue/composition-api" "1.7.2"
-    aphrodite "git+https://github.com/learningequality/aphrodite.git"
+    aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"
     color "3.2.1"
     css-element-queries "1.2.0"
@@ -10699,16 +10699,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10795,14 +10786,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12150,16 +12134,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From aaecc38b1d64c1ba80d9a3174526b236ecc31927 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 11 Oct 2024 14:09:05 -0400
Subject: [PATCH 45/65] Cleanup unused responsiveElementMixin

---
 kolibri/core/assets/src/views/InteractionList/index.vue        | 2 --
 kolibri/core/assets/src/views/MultiPaneLayout.vue              | 2 --
 kolibri/core/assets/src/views/SideNav.vue                      | 3 +--
 .../plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue | 2 --
 .../plugins/media_player/assets/src/views/MediaPlayerIndex.vue | 3 +--
 .../assets/src/views/SlideshowRendererComponent.vue            | 2 --
 packages/kolibri-common/components/SearchBox.vue               | 3 +--
 7 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/kolibri/core/assets/src/views/InteractionList/index.vue b/kolibri/core/assets/src/views/InteractionList/index.vue
index ac111e9ae1a..c36d09c21f0 100644
--- a/kolibri/core/assets/src/views/InteractionList/index.vue
+++ b/kolibri/core/assets/src/views/InteractionList/index.vue
@@ -21,13 +21,11 @@
 
 <script>
 
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import InteractionItem from './InteractionItem';
 
   export default {
     name: 'InteractionList',
     components: { InteractionItem },
-    mixins: [responsiveElementMixin],
     props: {
       interactions: {
         type: Array,
diff --git a/kolibri/core/assets/src/views/MultiPaneLayout.vue b/kolibri/core/assets/src/views/MultiPaneLayout.vue
index a97480b4073..970be5bcf53 100644
--- a/kolibri/core/assets/src/views/MultiPaneLayout.vue
+++ b/kolibri/core/assets/src/views/MultiPaneLayout.vue
@@ -56,11 +56,9 @@
 <script>
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
 
   export default {
     name: 'MultiPaneLayout',
-    mixins: [responsiveElementMixin],
     setup() {
       const { windowHeight } = useKResponsiveWindow();
       return {
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index a3bf7dad46b..3db86cc2ad7 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -254,7 +254,6 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
   import CoreLogo from 'kolibri.coreVue.components.CoreLogo';
@@ -299,7 +298,7 @@
       LanguageSwitcherModal,
       BottomNavigationBar,
     },
-    mixins: [commonCoreStrings, responsiveElementMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const { windowIsSmall, windowIsLarge } = useKResponsiveWindow();
       const {
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
index 484cf8fc6a8..73331e050bc 100644
--- a/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
+++ b/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
@@ -171,7 +171,6 @@
   import Lockr from 'lockr';
   import FocusLock from 'vue-focus-lock';
   import CoreFullscreen from 'kolibri.coreVue.components.CoreFullscreen';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import iFrameView from './SandboxIFrameView';
   import LoadingScreen from './LoadingScreen';
@@ -221,7 +220,6 @@
       SearchButton,
       LoadingError,
     },
-    mixins: [responsiveElementMixin],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
       return {
diff --git a/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue b/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
index 23c69fea533..6a058c51056 100644
--- a/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
+++ b/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
@@ -98,7 +98,6 @@
   import throttle from 'lodash/throttle';
   import { languageIdToCode } from 'kolibri.utils.i18n';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import Settings from '../utils/settings';
   import { ReplayButton, ForwardButton } from './customButtons';
@@ -123,7 +122,7 @@
   export default {
     name: 'MediaPlayerIndex',
     components: { MediaPlayerFullscreen, MediaPlayerTranscript },
-    mixins: [commonCoreStrings, responsiveElementMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const { windowIsSmall, windowIsPortrait } = useKResponsiveWindow();
       return { windowIsSmall, windowIsPortrait };
diff --git a/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue b/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
index 7d87f09b985..3513696daac 100644
--- a/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
+++ b/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
@@ -87,7 +87,6 @@
   import objectFitImages from 'object-fit-images';
   import client from 'kolibri.client';
 
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
   import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton';
@@ -109,7 +108,6 @@
       HooperPagination,
       HooperNavigation,
     },
-    mixins: [responsiveElementMixin],
     setup() {
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index 58203b5613f..7b3cefbde96 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -62,11 +62,10 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
 
   export default {
     name: 'SearchBox',
-    mixins: [commonCoreStrings, responsiveElementMixin],
+    mixins: [commonCoreStrings],
     props: {
       icon: {
         type: String,

From 554a11f2aac0b857b991602f9d09e36163f18b9e Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 11 Oct 2024 14:10:02 -0400
Subject: [PATCH 46/65] Update KResponsiveElementMixin to useKResponsiveElement
 - a v5 breaking change

---
 kolibri/core/assets/src/views/SlotTruncator.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/kolibri/core/assets/src/views/SlotTruncator.vue b/kolibri/core/assets/src/views/SlotTruncator.vue
index dbf1c534aef..070874903d2 100644
--- a/kolibri/core/assets/src/views/SlotTruncator.vue
+++ b/kolibri/core/assets/src/views/SlotTruncator.vue
@@ -35,12 +35,19 @@
 <script>
 
   import debounce from 'lodash/debounce';
-  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
+  import useKResponsiveElement from 'kolibri-design-system/lib/composables/useKResponsiveElement';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
     name: 'SlotTruncator',
-    mixins: [commonCoreStrings, responsiveElementMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { elementWidth, elementHeight } = useKResponsiveElement();
+      return {
+        elementWidth,
+        elementHeight,
+      };
+    },
     props: {
       maxHeight: {
         type: Number,

From a6d28f67d278b13db948391e933f5d86c4afa318 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Fri, 11 Oct 2024 14:10:43 -0400
Subject: [PATCH 47/65] Update KCard prop name, a kds breaking change

---
 .../kolibri-common/components/Cards/AccessibleFolderCard.vue    | 2 +-
 .../kolibri-common/components/Cards/AccessibleResourceCard.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
index bf92a26282f..dc3cf59479f 100644
--- a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
@@ -3,7 +3,7 @@
   <KCard
     :to="to"
     :headingLevel="headingLevel"
-    :layout="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
+    :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
     thumbnailDisplay="large"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"
diff --git a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
index aaec293142c..210644f2c70 100644
--- a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
@@ -3,7 +3,7 @@
   <KCard
     :to="to"
     :headingLevel="headingLevel"
-    :layout="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
+    :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
     thumbnailDisplay="large"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"

From 4998b30a85657850869f3c31872e15e1f08b6534 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 14 Oct 2024 11:53:42 -0500
Subject: [PATCH 48/65] Requested changes

---
 .../coach/assets/src/views/plan/QuizSummaryPage/api.js   | 9 ++++-----
 .../assets/src/views/plan/QuizSummaryPage/index.vue      | 4 +++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
index 39378bab9d9..0351b8195cf 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/api.js
@@ -14,11 +14,10 @@ const fetchDifficultQuestions = async exam => {
     true,
   );
 
-  const allQuestions = exam.question_sources.reduce((qs, section) => {
-    qs = [...qs, ...section.questions];
-
-    return qs;
-  }, []);
+  const allQuestions = exam.question_sources.reduce(
+    (qs, section) => [...qs, ...section.questions],
+    [],
+  );
 
   allQuestions.forEach(question => {
     const questionStats = correctnessStats.find(stat => stat.item === question.item);
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index 0f6b306355c..87fdc014611 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -344,7 +344,9 @@
         });
       },
       exportCSV() {
-        this.$refs.table.exportCSV?.();
+        if (typeof this.$refs.table.exportCSV === 'function') {
+          this.$refs.table.exportCSV();
+        }
       },
     },
     $trs: {

From c7fd6c75e202dfda1b87e5800abaa5f2fc613500 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 15 Oct 2024 06:11:42 -0500
Subject: [PATCH 49/65] Solve uuid bug

---
 .../kolibri-common/components/accordion/AccordionItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index a98c8417f36..e793d3090cc 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -60,11 +60,11 @@
   export default {
     name: 'AccordionItem',
     setup() {
-      const _uid = uuidv4();
-      const { registerItem, unregisterItem, toggle, isExpanded } = injectAccordionItem(_uid);
+      const uuid = uuidv4();
+      const { registerItem, unregisterItem, toggle, isExpanded } = injectAccordionItem(uuid);
 
       return {
-        _uid,
+        uuid,
         registerItem,
         unregisterItem,
         toggle,
@@ -91,7 +91,7 @@
     },
     computed: {
       contentId() {
-        return `accordion-content-${this._uid}`;
+        return `accordion-content-${this.uuid}`;
       },
     },
     mounted() {

From 9653d9b4efcd55b4b1ca9d75cf1e1ca68e87750b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 15 Oct 2024 08:01:16 -0500
Subject: [PATCH 50/65] Fix userSelect on drag

---
 .../src/views/plan/CreateExamPage/CreateQuizSection.vue      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 9b2f406725e..5bf696917db 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -234,6 +234,9 @@
                     displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)
                   "
                   :aria-selected="selectedActiveQuestions.includes(question.item)"
+                  :headerAppearanceOverrides="{
+                    userSelect: dragActive ? 'none !important' : 'text',
+                  }"
                 >
                   <template #leading-actions>
                     <DragHandle>
@@ -259,7 +262,7 @@
                   <template #content>
                     <div
                       :id="`question-panel-${question.item}`"
-                      :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
+                      :style="{ userSelect: dragActive ? 'none !important' : 'text' }"
                     >
                       <ContentRenderer
                         :ref="`contentRenderer-${question.item}`"

From 1c30214b5cdd0d1c54ed7ea553258e2ae1683aac Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 15 Oct 2024 08:27:44 -0500
Subject: [PATCH 51/65] Clean code

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 26 ++++++++++++++++---
 .../components/accordion/useAccordion.js      | 15 -----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 5bf696917db..89572e6db45 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -170,7 +170,7 @@
 
         <AccordionContainer>
           <template #header="{ canExpandAll, expandAll, canCollapseAll, collapseAll }">
-            <div style="display: flex; align-items: center; justify-content: space-between">
+            <div class="questions-accordion-header">
               <div>
                 <KCheckbox
                   ref="selectAllCheckbox"
@@ -182,7 +182,7 @@
                   @click.stop="() => {}"
                 />
               </div>
-              <div style="display: flex; align-items: center">
+              <div class="trailing-actions">
                 <KIconButton
                   icon="expandAll"
                   :tooltip="expandAll$()"
@@ -227,7 +227,9 @@
                 v-for="(question, index) in activeQuestions"
                 :key="`drag-${question.item}`"
                 tabindex="-1"
-                style="background: white"
+                :style="{
+                  background: $themeTokens.surface,
+                }"
               >
                 <AccordionItem
                   :title="
@@ -256,7 +258,7 @@
                     <KCheckbox
                       class="accordion-item-checkbox"
                       :checked="selectedActiveQuestions.includes(question.item)"
-                      @change="() => toggleQuestionInSelection(question.item)"
+                      @change="(_, $event) => handleQuestionCheckboxChange(question.item, $event)"
                     />
                   </template>
                   <template #content>
@@ -638,6 +640,10 @@
         const newArray = this.moveUpOne(oldIndex, array);
         this.handleQuestionOrderChange({ newArray });
       },
+      handleQuestionCheckboxChange(item, $event) {
+        $event.stopPropagation();
+        this.toggleQuestionInSelection(item);
+      },
       openSelectResources() {
         this.$router.push({
           name: PageNames.QUIZ_SELECT_RESOURCES,
@@ -819,4 +825,16 @@
     outline-offset: -5px !important;
   }
 
+  .questions-accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 8px;
+
+    .trailing-actions {
+      display: flex;
+      align-items: center;
+    }
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
index c0f6780f053..d13115163c4 100644
--- a/packages/kolibri-common/components/accordion/useAccordion.js
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -89,18 +89,3 @@ export function injectAccordionItem(uid) {
     isExpanded,
   };
 }
-/**
- * <KAccordion>
- *   <KAccordionItem
- *      v-for="(item, index) in items"
- *      :isExpanded="isExpanded(index)"
- *   >
- *      <template #heading>
- *        <h3 @click="toggle(index)">{{ item.title }}</h3>
- *      </template>
- *      <template #content>
- *        <p v-if="isExpanded(index)">{{ item.content }}</p>
- *      </template>
- *   </KAccordionItem>
- * </KAccordion>
- */

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 52/65] 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 53/65] 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 54/65] 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 55/65] 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 56/65] 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 57/65] 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 58/65] 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 59/65] 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 60/65] [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 61/65] 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 62/65] 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 63/65] 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 64/65] 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 65/65] 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>