From 0eb19148cda86b5a0be8d6f4eef400813607051e Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Wed, 4 Oct 2023 15:53:14 +0530
Subject: [PATCH 01/14] Info page done

---
 .../plugins/device/assets/src/views/DeviceInfoPage.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
index 6727bfc97f7..83d1900fcd1 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -81,7 +81,7 @@
   import { mapGetters, mapState } from 'vuex';
   import TechnicalTextBlock from 'kolibri-common/components/AppError/TechnicalTextBlock';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import DeviceAppBarPage from './DeviceAppBarPage';
   import { deviceString } from './commonDeviceStrings';
   import DeviceNameModal from './DeviceNameModal';
@@ -98,7 +98,13 @@
       DeviceNameModal,
       TechnicalTextBlock,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup(){
+      const windowIsSmall=useKResponsiveWindow();
+      return{
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         advancedShown: false,

From ba838e4552798a899edd80d1f4eb43e551e5ecf3 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Wed, 4 Oct 2023 18:34:53 +0530
Subject: [PATCH 02/14] lint fixes

---
 kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
index 83d1900fcd1..67e2b69cee1 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -99,9 +99,9 @@
       TechnicalTextBlock,
     },
     mixins: [commonCoreStrings],
-    setup(){
-      const windowIsSmall=useKResponsiveWindow();
-      return{
+    setup() {
+      const windowIsSmall = useKResponsiveWindow();
+      return {
         windowIsSmall,
       };
     },

From e2e8a3a7e4d7d19a372443eb2a176374c82f1b25 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 13:15:23 +0530
Subject: [PATCH 03/14] header with options done

---
 .../device/assets/src/views/HeaderWithOptions.vue        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
index 83c2b72bddf..04e366ca342 100644
--- a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
+++ b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
@@ -24,11 +24,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'HeaderWithOptions',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const windowIsSmall = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       headerText: {
         type: String,

From f77192500b8a5f3a425af78b07e28fc272e47337 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 13:18:33 +0530
Subject: [PATCH 04/14] device-facility page done

---
 .../device/assets/src/views/FacilitiesPage/index.vue   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
index 6e6b94407fe..e89b9c5376a 100644
--- a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
@@ -182,7 +182,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import { FacilityResource } from 'kolibri.resources';
@@ -230,7 +230,13 @@
       SyncAllFacilitiesModal,
       TasksBar,
     },
-    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         showSyncAllModal: false,

From ed778f83611fc4dbcb1a45d19cd1b31075052b92 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 13:38:46 +0530
Subject: [PATCH 05/14] FilterChannelListContainer done

---
 .../ManageContentPage/FilteredChannelListContainer.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
index b4f744d6f9c..c1064d4f426 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
@@ -61,7 +61,7 @@
   import differenceBy from 'lodash/differenceBy';
   import unionBy from 'lodash/unionBy';
   import uniqBy from 'lodash/uniqBy';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
@@ -70,7 +70,13 @@
     components: {
       FilterTextbox,
     },
-    mixins: [KResponsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const windowIsLarge = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     props: {
       channels: {
         type: Array,

From acca077a3dbb7d5f38f99babbbe54986d36cefe8 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 15:11:38 +0530
Subject: [PATCH 06/14] TaxkPanel done

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

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
index 1ffcb45098f..c8b96396c9c 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="task-panel" :class="{ 'task-panel-sm': windowIsSmall }">
+  <div class="task-panel" :class="{ 'task-panel-sm': windowWidth<600 }">
     <div class="icon">
       <transition mode="out-in">
         <KIcon
@@ -89,7 +89,7 @@
   // Displays a single Task and its metadata, and provides buttons
   // to cancel or clear it.
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
 
@@ -130,7 +130,13 @@
 
   export default {
     name: 'TaskPanel',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const {windowWidth} = useKResponsiveWindow();
+      return {
+        windowWidth,
+      };
+    },
     props: {
       task: {
         type: Object,

From 40c37b52919e3db375967d1dca4fd89c082b126e Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 15:40:24 +0530
Subject: [PATCH 07/14] ChannelContentSummary done

---
 .../ChannelContentsSummary.vue                 | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
index 7d94c66d16e..dcee6e2e840 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -27,16 +27,16 @@
 
       <KFixedGrid numCols="4">
         <KFixedGridItem
-          :span="windowIsSmall ? 4 : 1"
+          :span="windowWidth<600 ? 4 : 1"
           class="version"
         >
-          <p :style="[windowIsSmall ? { marginBottom: 0 } : {}]">
+          <p :style="[windowWidth<600  ? { marginBottom: 0 } : {}]">
             {{ $tr('version', { version: versionNumber }) }}
           </p>
         </KFixedGridItem>
         <KFixedGridItem
-          :span="windowIsSmall ? 4 : 3"
-          :alignment="windowIsSmall ? 'left' : 'right'"
+          :span="windowWidth<600  ? 4 : 3"
+          :alignment="windowWidth<600 ? 'left' : 'right'"
         >
           <p><slot></slot></p>
         </KFixedGridItem>
@@ -84,7 +84,7 @@
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import plugin_data from 'plugin_data';
 
   export default {
@@ -92,7 +92,13 @@
     components: {
       TextTruncatorCss,
     },
-    mixins: [commonCoreStrings, KResponsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const windowWidth = useKResponsiveWindow();
+      return {
+        windowWidth,
+      };
+    },
     props: {
       channel: {
         type: Object,

From 2ae1d066b8e939849a012ef259ecb93429dbee1b Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 18:24:07 +0530
Subject: [PATCH 08/14] proper importing method

---
 .../device/assets/src/views/DeviceInfoPage.vue       |  2 +-
 .../FilteredChannelListContainer.vue                 |  2 +-
 .../assets/src/views/ManageTasksPage/TaskPanel.vue   |  6 +++---
 .../SelectContentPage/ChannelContentsSummary.vue     | 12 ++++++------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
index 67e2b69cee1..344d93019b0 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -100,7 +100,7 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const windowIsSmall = useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         windowIsSmall,
       };
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
index c1064d4f426..aabe96dcbf5 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
@@ -72,7 +72,7 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const windowIsLarge = useKResponsiveWindow();
+      const { windowIsLarge } = useKResponsiveWindow();
       return {
         windowIsLarge,
       };
diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
index c8b96396c9c..4a2ab128cbd 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="task-panel" :class="{ 'task-panel-sm': windowWidth<600 }">
+  <div class="task-panel" :class="{ 'task-panel-sm': windowIsSmall }">
     <div class="icon">
       <transition mode="out-in">
         <KIcon
@@ -132,9 +132,9 @@
     name: 'TaskPanel',
     mixins: [commonCoreStrings],
     setup() {
-      const {windowWidth} = useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
-        windowWidth,
+        windowIsSmall,
       };
     },
     props: {
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
index dcee6e2e840..57c45c536ba 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -27,16 +27,16 @@
 
       <KFixedGrid numCols="4">
         <KFixedGridItem
-          :span="windowWidth<600 ? 4 : 1"
+          :span="windowIsSmall ? 4 : 1"
           class="version"
         >
-          <p :style="[windowWidth<600  ? { marginBottom: 0 } : {}]">
+          <p :style="[windowIsSmall  ? { marginBottom: 0 } : {}]">
             {{ $tr('version', { version: versionNumber }) }}
           </p>
         </KFixedGridItem>
         <KFixedGridItem
-          :span="windowWidth<600  ? 4 : 3"
-          :alignment="windowWidth<600 ? 'left' : 'right'"
+          :span="windowIsSmall  ? 4 : 3"
+          :alignment="windowIsSmall ? 'left' : 'right'"
         >
           <p><slot></slot></p>
         </KFixedGridItem>
@@ -94,9 +94,9 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const windowWidth = useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
-        windowWidth,
+        windowIsSmall,
       };
     },
     props: {

From c864286b3ed727d60b054d1c74eac5e421eaec01 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 18:26:34 +0530
Subject: [PATCH 09/14] proper import

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

diff --git a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
index 04e366ca342..0a30067b38a 100644
--- a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
+++ b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
@@ -29,7 +29,7 @@
   export default {
     name: 'HeaderWithOptions',
     setup() {
-      const windowIsSmall = useKResponsiveWindow();
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         windowIsSmall,
       };

From fdf9ed176b4027ade047f50e5564e83cc3468373 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 19:24:05 +0530
Subject: [PATCH 10/14] DeviceDetails done

---
 .../ManageContentPage/ChannelPanel/ChannelDetails.vue  |  9 +++++++--
 .../ManageContentPage/ChannelPanel/WithCheckbox.vue    |  9 +++++++--
 .../ChannelPanel/WithImportDetails.vue                 | 10 ++++++++--
 .../ChannelPanel/WithSizeAndOptions.vue                | 10 ++++++++--
 .../device/assets/src/views/ManageTasksPage/index.vue  |  8 ++++++--
 5 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
index 5c6f5d14b4e..4c859997bf7 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
@@ -58,7 +58,7 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
 
   export default {
@@ -66,7 +66,12 @@
     components: {
       CoachContentLabel,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
index 8e47a53a05b..650f5b56ad4 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
@@ -38,7 +38,7 @@
 
   // Channel Panel with Details and Checkbox
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import ChannelDetails from './ChannelDetails';
 
   export default {
@@ -46,7 +46,12 @@
     components: {
       ChannelDetails,
     },
-    mixins: [responsiveWindowMixin],
+    setup(){
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
index d6da6c6bdec..0afa5af76a2 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
@@ -85,7 +85,7 @@
   // Resources on Device Indicator
   import { mapGetters } from 'vuex';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { selectContentPageLink } from '../manageContentLinks';
   import NewBadge from '../NewBadge';
@@ -99,7 +99,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
index 40949432cf2..04725a3f304 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
@@ -51,7 +51,7 @@
 
   // ChannelPanel with Details, On-Device Size, and Options Dropdown
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import NewBadge from '../NewBadge';
@@ -64,7 +64,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
index ae6e274e987..4699084cb1b 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
@@ -60,7 +60,7 @@
   import { mapGetters } from 'vuex';
   import { TaskResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonDeviceStrings from '../commonDeviceStrings';
@@ -82,9 +82,13 @@
       BottomAppBar,
       ImmersivePage,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
     setup() {
       useContentTasks();
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
     },
     data() {
       return {

From e45d08d72093cd3f958d637bd61e49bba010ac12 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 19:36:42 +0530
Subject: [PATCH 11/14] Select content page done

---
 .../device/assets/src/views/SelectContentPage/index.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
index 33ac0fbdb4e..19387e445a3 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
@@ -84,7 +84,7 @@
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskTypes } from 'kolibri.utils.syncTaskUtils';
   import find from 'lodash/find';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { TaskResource } from 'kolibri.resources';
   import commonDeviceStrings from '../commonDeviceStrings';
   import TaskProgress from '../ManageContentPage/TaskProgress';
@@ -118,9 +118,13 @@
       TaskProgress,
       UiAlert,
     },
-    mixins: [commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
     },
     data() {
       return {

From c750e49c5b56b4d2673bb50c7b093295f2cc3bff Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 19:42:31 +0530
Subject: [PATCH 12/14] removed KResponsiveWindow on pages where not used

---
 .../device/assets/src/views/AvailableChannelsPage/index.vue    | 3 +--
 .../src/views/ManageContentPage/DeleteExportChannelsPage.vue   | 3 +--
 .../assets/src/views/ManageContentPage/SelectionBottomBar.vue  | 3 +--
 .../device/assets/src/views/ManageContentPage/TasksBar.vue     | 3 +--
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
index 8dcf45af1b0..a35e4b6a532 100644
--- a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
@@ -139,7 +139,6 @@
   import omit from 'lodash/omit';
   import some from 'lodash/some';
   import uniqBy from 'lodash/uniqBy';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { TaskResource } from 'kolibri.resources';
@@ -176,7 +175,7 @@
       SelectionBottomBar,
       UiAlert,
     },
-    mixins: [commonCoreStrings, commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonCoreStrings, commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
     },
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
index b3e3954aa3c..2ff7da3726d 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
@@ -54,7 +54,6 @@
 
   import { mapGetters } from 'vuex';
   import find from 'lodash/find';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskResource } from 'kolibri.resources';
@@ -85,7 +84,7 @@
       DeleteChannelModal,
       SelectDriveModal,
     },
-    mixins: [KResponsiveWindowMixin, taskNotificationMixin],
+    mixins: [taskNotificationMixin],
     setup() {
       useContentTasks();
     },
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
index 3fac44572bf..cd77d44473c 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
@@ -40,7 +40,6 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
 
   // Shows a 'EXPORT', 'IMPORT', or 'DELETE' button next to a message
   // of how many items are selected plus their size.
@@ -49,7 +48,7 @@
     components: {
       BottomAppBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings,
     props: {
       // TODO remove this and only pass in resourceCounts object
       selectedObjects: {
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
index 08fcf97ec86..5469f8086ff 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
@@ -36,7 +36,6 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import some from 'lodash/some';
   import sumBy from 'lodash/sumBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -44,7 +43,7 @@
 
   export default {
     name: 'TasksBar',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
     props: {
       tasks: {
         type: Array,

From fc7cd8ccf90a4ba7017523679770c91ac90f5569 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Thu, 5 Oct 2023 19:49:37 +0530
Subject: [PATCH 13/14] format fix

---
 .../src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue | 2 +-
 .../assets/src/views/ManageContentPage/SelectionBottomBar.vue | 2 +-
 .../src/views/SelectContentPage/ChannelContentsSummary.vue    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
index 650f5b56ad4..bfc90e38e9b 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
@@ -46,7 +46,7 @@
     components: {
       ChannelDetails,
     },
-    setup(){
+    setup() {
       const { windowIsSmall } = useKResponsiveWindow();
       return {
         windowIsSmall,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
index cd77d44473c..40381a15589 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
@@ -48,7 +48,7 @@
     components: {
       BottomAppBar,
     },
-    mixins: [commonCoreStrings,
+    mixins: [commonCoreStrings],
     props: {
       // TODO remove this and only pass in resourceCounts object
       selectedObjects: {
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
index 57c45c536ba..ceff7118a37 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -30,12 +30,12 @@
           :span="windowIsSmall ? 4 : 1"
           class="version"
         >
-          <p :style="[windowIsSmall  ? { marginBottom: 0 } : {}]">
+          <p :style="[windowIsSmall ? { marginBottom: 0 } : {}]">
             {{ $tr('version', { version: versionNumber }) }}
           </p>
         </KFixedGridItem>
         <KFixedGridItem
-          :span="windowIsSmall  ? 4 : 3"
+          :span="windowIsSmall ? 4 : 3"
           :alignment="windowIsSmall ? 'left' : 'right'"
         >
           <p><slot></slot></p>

From 20ea01fb195dcb42633c372a9c7ca331bae27b1b Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Thu, 26 Oct 2023 07:32:30 +0200
Subject: [PATCH 14/14] Update taskpanel snapshot

---
 .../__test__/__snapshots__/TaskPanel.spec.js.snap             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap b/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
index 4a22e99ad5a..cd97b450630 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT task 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
@@ -31,7 +31,7 @@ exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT tas
 `;
 
 exports[`TaskPanel renders correctly when it is a canceled DISKEXPORT task (bulk export) 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>