From 35d11a10184cc74e71e28425294c265bf43be12c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 9 Nov 2025 03:06:01 +0530
Subject: [PATCH 01/24] Basic addition to upate the side filter panel

---
 .../views/Channel/CatalogFilters.vue          | 276 +++++++++++++-----
 1 file changed, 201 insertions(+), 75 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index f2e92dc894..8ce5ff8bcb 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -1,60 +1,127 @@
 <template>
 
   <div>
+    <!-- Mobile filter button -->
     <KButton
-      v-if="$vuetify.breakpoint.xsOnly"
+      v-if="!windowIsLarge"
       class="drawer-btn"
-      :text="$tr('searchText')"
-      :primary="true"
-      appearance="flat-button"
-      @click.stop="drawer = true"
+      :text="$tr('FilterText')"
+      appearance="raised-button"
+      @click.stop="mobileSidePanelIsOpen = true"
     />
+
     <CatalogFilterBar />
-    <VNavigationDrawer
-      v-model="drawer"
-      :permanent="$vuetify.breakpoint.smAndUp"
-      app
-      disable-route-watcher
-      :clipped="$vuetify.breakpoint.smAndUp"
-      :right="isRTL"
-    >
-      <VContainer class="filters pa-3">
-        <VToolbar
-          v-if="$vuetify.breakpoint.xsOnly"
-          color="transparent"
-          flat
-          dense
-        >
-          <VSpacer />
-          <VBtn
-            icon
-            flat
-            style="text-align: right"
-            @click="drawer = false"
-          >
-            <Icon icon="clear" />
-          </VBtn>
-        </VToolbar>
 
+    <!-- Desktop/Large Screen Side Panel (non-modal) -->
+    <aside
+      v-if="windowIsLarge"
+      class="side-panel-container"
+      :class="{ 'is-rtl': isRTL }"
+    >
+      <div class="filters">
         <!-- Keyword search -->
-        <VTextField
+        <KTextbox
           v-model="keywordInput"
-          color="primary"
           :label="$tr('searchLabel')"
-          box
-          clearable
+          :clearable="true"
           data-test="keywords"
           autofocus
           @input="setKeywords"
         />
 
         <!-- Language -->
-        <LanguageFilter
-          v-model="languages"
-          :menu-props="menuProps"
+        <LanguageFilter v-model="languages" />
+
+        <!-- License -->
+        <MultiSelect
+          v-if="!libraryMode"
+          v-model="licenses"
+          :items="licenseOptions"
+          :label="$tr('licenseLabel')"
+        />
+
+        <!-- Formats -->
+        <MultiSelect
+          v-model="kinds"
+          :items="kindOptions"
+          :label="$tr('formatLabel')"
+        />
+
+        <!-- Starred -->
+        <KCheckbox
+          v-if="loggedIn"
+          v-model="bookmark"
+          :label="$tr('starredLabel')"
+        />
+
+        <!-- Includes -->
+        <div class="subheading">
+          {{ $tr('includesLabel') }}
+        </div>
+
+        <div class="checkbox-with-tooltip">
+          <KCheckbox
+            v-model="coach"
+            :label="$tr('coachLabel')"
+          />
+          <HelpTooltip
+            :text="$tr('coachDescription')"
+            maxWidth="250px"
+          />
+        </div>
+
+        <KCheckbox
+          v-model="subtitles"
+          :label="$tr('subtitlesLabel')"
+        />
+
+        <KRouterLink
+          class="qa-link"
+          :to="faqLink"
+          :text="$tr('frequentlyAskedQuestionsLink')"
+          appearance="basic-link"
+          iconAfter="openNewTab"
+          target="_blank"
         />
 
-        <!-- License (attach to self to keep in notranslate class) -->
+        <!-- Footer with KImg -->
+        <div class="side-panel-footer">
+          <KImg
+            :src="leLogoSrc"
+            altText="Learning Equality logo"
+            :aspectRatio="getLogoAspectRatio"
+            scaleType="contain"
+            :appearanceOverrides="logoStyles"
+          />
+          <KExternalLink
+            href="https://learningequality.org/"
+            :text="$tr('copyright', { year: new Date().getFullYear() })"
+            openInNewTab
+          />
+        </div>
+      </div>
+    </aside>
+
+    <!-- Mobile Side Panel Modal -->
+    <SidePanelModal
+      v-else-if="mobileSidePanelIsOpen"
+      alignment="left"
+      @closePanel="mobileSidePanelIsOpen = false"
+    >
+      <div class="filters mobile-filters">
+        <!-- Keyword search -->
+        <KTextbox
+          v-model="keywordInput"
+          :label="$tr('searchLabel')"
+          :clearable="true"
+          data-test="keywords"
+          @input="setKeywords"
+        />
+
+        <!-- Language -->
+        <LanguageFilter v-model="languages" />
+
+        <!-- License -->
         <MultiSelect
           v-if="!libraryMode"
           v-model="licenses"
@@ -62,7 +129,7 @@
           :label="$tr('licenseLabel')"
         />
 
-        <!-- Formats (attach to self to keep in notranslate class) -->
+        <!-- Formats -->
         <MultiSelect
           v-model="kinds"
           :items="kindOptions"
@@ -70,7 +137,7 @@
         />
 
         <!-- Starred -->
-        <Checkbox
+        <KCheckbox
           v-if="loggedIn"
           v-model="bookmark"
           :label="$tr('starredLabel')"
@@ -81,23 +148,22 @@
           {{ $tr('includesLabel') }}
         </div>
 
-        <div :style="{ display: 'flex', alignItems: 'center' }">
-          <Checkbox
+        <div class="checkbox-with-tooltip">
+          <KCheckbox
             v-model="coach"
-            aria-describedby="tooltip-coach"
             :label="$tr('coachLabel')"
           />
           <HelpTooltip
             :text="$tr('coachDescription')"
             maxWidth="250px"
-            tooltipId="tooltip-coach"
           />
         </div>
 
-        <Checkbox
+        <KCheckbox
           v-model="subtitles"
           :label="$tr('subtitlesLabel')"
         />
+
         <KRouterLink
           class="qa-link"
           :to="faqLink"
@@ -106,19 +172,15 @@
           iconAfter="openNewTab"
           target="_blank"
         />
-      </VContainer>
-      <VFooter
-        class="pb-3 pt-2 px-4"
-        color="transparent"
-        height="100"
-      >
-        <div>
-          <VImg
-            height="60"
-            width="90"
-            class="mb-1 mr-2"
-            contain
-            :src="require('shared/images/le-logo.svg')"
+
+        <!-- Footer with KImg for mobile -->
+        <div class="side-panel-footer">
+          <KImg
+            :src="leLogoSrc"
+            altText="Learning Equality logo"
+            :aspectRatio="getLogoAspectRatio"
+            scaleType="contain"
+            :appearanceOverrides="mobileLogoStyles"
           />
           <KExternalLink
             href="https://learningequality.org/"
@@ -126,8 +188,8 @@
             openInNewTab
           />
         </div>
-      </VFooter>
-    </VNavigationDrawer>
+      </div>
+    </SidePanelModal>
   </div>
 
 </template>
@@ -137,32 +199,41 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../constants';
   import CatalogFilterBar from './CatalogFilterBar';
   import { catalogFilterMixin } from './mixins';
   import LanguageFilter from './components/LanguageFilter';
   import MultiSelect from 'shared/views/form/MultiSelect';
   import { constantsTranslationMixin } from 'shared/mixins';
-  import Checkbox from 'shared/views/form/Checkbox';
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
+  import SidePanelModal from 'shared/views/SidePanelModal';
+
   const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
 
   export default {
     name: 'CatalogFilters',
     components: {
       LanguageFilter,
-      Checkbox,
       HelpTooltip,
       MultiSelect,
       CatalogFilterBar,
+      SidePanelModal,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     data() {
       return {
-        drawer: false,
+        mobileSidePanelIsOpen: false,
         keywordInput: '',
+        leLogoSrc: require('shared/images/le-logo.svg'),
       };
     },
     computed: {
@@ -176,9 +247,6 @@
       faqLink() {
         return { name: RouteNames.CATALOG_FAQ };
       },
-      menuProps() {
-        return { offsetY: true, maxHeight: 270 };
-      },
       kindOptions() {
         return (window.publicKinds || [])
           .map(kind => {
@@ -202,6 +270,24 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
+      // LE logo aspect ratio (90x60 = 3:2)
+      getLogoAspectRatio() {
+        return '3:2';
+      },
+      logoStyles() {
+        return {
+          width: '90px',
+          height: '60px',
+          margin: '0 auto 8px auto',
+        };
+      },
+      mobileLogoStyles() {
+        return {
+          width: '80px',
+          height: '53px',
+          margin: '0 auto 8px auto',
+        };
+      },
     },
     watch: {
       keywords() {
@@ -224,7 +310,7 @@
       licenseLabel: 'Licenses',
       formatLabel: 'Formats',
       includesLabel: 'Display only channels with',
-      searchText: 'Search',
+      FilterText: 'Filter',
       coachDescription: 'Resources for coaches are only visible to coaches in Kolibri',
       frequentlyAskedQuestionsLink: 'Frequently asked questions',
       copyright: '© {year} Learning Equality',
@@ -236,12 +322,40 @@
 
 <style lang="scss" scoped>
 
-  .v-input--checkbox {
-    margin: 0;
+  .side-panel-container {
+    width: 300px;
+    min-width: 300px;
+    height: calc(100vh - 64px); // Adjust based on app bar height
+    overflow-y: auto;
+    background-color: white;
+    border-right: 1px solid #e0e0e0;
+
+    &.is-rtl {
+      border-left: 1px solid #e0e0e0;
+    }
   }
 
-  ::v-deep .v-messages {
-    display: none;
+  .filters {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 100%;
+    padding: 16px;
+  }
+
+  .mobile-filters {
+    height: auto;
+    padding-bottom: 80px; // Extra space for mobile
+  }
+
+  .mobile-header {
+    padding: 16px;
+
+    h2 {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
   }
 
   .subheading {
@@ -251,10 +365,10 @@
     color: gray;
   }
 
-  .filters {
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
+  .checkbox-with-tooltip {
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
 
   .qa-link {
@@ -265,4 +379,16 @@
     margin-top: 10px;
   }
 
+  .side-panel-footer {
+    padding-top: 24px;
+    margin-top: auto;
+    text-align: center;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  // Remove Vuetify-specific styles
+  ::v-deep .v-messages {
+    display: none;
+  }
+
 </style>

From f3b5c443d12e79a3bb8fa1361477f70ad8e5509b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 11:05:28 +0530
Subject: [PATCH 02/24] added ktextbox

---
 .../views/Channel/CatalogFilters.vue          | 268 +++++-------------
 1 file changed, 69 insertions(+), 199 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 8ce5ff8bcb..a0bdc20bec 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -1,114 +1,40 @@
 <template>
 
   <div>
-    <!-- Mobile filter button -->
     <KButton
-      v-if="!windowIsLarge"
+      v-if="$vuetify.breakpoint.xsOnly"
       class="drawer-btn"
-      :text="$tr('FilterText')"
+      :text="$tr('searchText')"
       appearance="raised-button"
-      @click.stop="mobileSidePanelIsOpen = true"
+      @click.stop="drawer = true"
     />
-
     <CatalogFilterBar />
-
-    <!-- Desktop/Large Screen Side Panel (non-modal) -->
-    <aside
-      v-if="windowIsLarge"
-      class="side-panel-container"
-      :class="{ 'is-rtl': isRTL }"
+    <VNavigationDrawer
+      v-model="drawer"
+      :permanent="$vuetify.breakpoint.smAndUp"
+      app
+      disable-route-watcher
+      :clipped="$vuetify.breakpoint.smAndUp"
+      :right="isRTL"
     >
-      <div class="filters">
-        <!-- Keyword search -->
-        <KTextbox
-          v-model="keywordInput"
-          :label="$tr('searchLabel')"
-          :clearable="true"
-          data-test="keywords"
-          autofocus
-          @input="setKeywords"
-        />
-
-        <!-- Language -->
-        <LanguageFilter v-model="languages" />
-
-        <!-- License -->
-        <MultiSelect
-          v-if="!libraryMode"
-          v-model="licenses"
-          :items="licenseOptions"
-          :label="$tr('licenseLabel')"
-        />
-
-        <!-- Formats -->
-        <MultiSelect
-          v-model="kinds"
-          :items="kindOptions"
-          :label="$tr('formatLabel')"
-        />
-
-        <!-- Starred -->
-        <KCheckbox
-          v-if="loggedIn"
-          v-model="bookmark"
-          :label="$tr('starredLabel')"
-        />
-
-        <!-- Includes -->
-        <div class="subheading">
-          {{ $tr('includesLabel') }}
-        </div>
-
-        <div class="checkbox-with-tooltip">
-          <KCheckbox
-            v-model="coach"
-            :label="$tr('coachLabel')"
-          />
-          <HelpTooltip
-            :text="$tr('coachDescription')"
-            maxWidth="250px"
-          />
-        </div>
-
-        <KCheckbox
-          v-model="subtitles"
-          :label="$tr('subtitlesLabel')"
-        />
-
-        <KRouterLink
-          class="qa-link"
-          :to="faqLink"
-          :text="$tr('frequentlyAskedQuestionsLink')"
-          appearance="basic-link"
-          iconAfter="openNewTab"
-          target="_blank"
-        />
-
-        <!-- Footer with KImg -->
-        <div class="side-panel-footer">
-          <KImg
-            :src="leLogoSrc"
-            altText="Learning Equality logo"
-            :aspectRatio="getLogoAspectRatio"
-            scaleType="contain"
-            :appearanceOverrides="logoStyles"
-          />
-          <KExternalLink
-            href="https://learningequality.org/"
-            :text="$tr('copyright', { year: new Date().getFullYear() })"
-            openInNewTab
-          />
-        </div>
-      </div>
-    </aside>
+      <VContainer class="filters pa-3">
+        <VToolbar
+          v-if="$vuetify.breakpoint.xsOnly"
+          color="transparent"
+          flat
+          dense
+        >
+          <VSpacer />
+          <VBtn
+            icon
+            flat
+            style="text-align: right"
+            @click="drawer = false"
+          >
+            <Icon icon="clear" />
+          </VBtn>
+        </VToolbar>
 
-    <!-- Mobile Side Panel Modal -->
-    <SidePanelModal
-      v-else-if="mobileSidePanelIsOpen"
-      alignment="left"
-      @closePanel="mobileSidePanelIsOpen = false"
-    >
-      <div class="filters mobile-filters">
         <!-- Keyword search -->
         <KTextbox
           v-model="keywordInput"
@@ -119,9 +45,12 @@
         />
 
         <!-- Language -->
-        <LanguageFilter v-model="languages" />
+        <LanguageFilter
+          v-model="languages"
+          :menu-props="menuProps"
+        />
 
-        <!-- License -->
+        <!-- License (attach to self to keep in notranslate class) -->
         <MultiSelect
           v-if="!libraryMode"
           v-model="licenses"
@@ -129,7 +58,7 @@
           :label="$tr('licenseLabel')"
         />
 
-        <!-- Formats -->
+        <!-- Formats (attach to self to keep in notranslate class) -->
         <MultiSelect
           v-model="kinds"
           :items="kindOptions"
@@ -137,7 +66,7 @@
         />
 
         <!-- Starred -->
-        <KCheckbox
+        <Checkbox
           v-if="loggedIn"
           v-model="bookmark"
           :label="$tr('starredLabel')"
@@ -148,22 +77,23 @@
           {{ $tr('includesLabel') }}
         </div>
 
-        <div class="checkbox-with-tooltip">
-          <KCheckbox
+        <div :style="{ display: 'flex', alignItems: 'center' }">
+          <Checkbox
             v-model="coach"
+            aria-describedby="tooltip-coach"
             :label="$tr('coachLabel')"
           />
           <HelpTooltip
             :text="$tr('coachDescription')"
             maxWidth="250px"
+            tooltipId="tooltip-coach"
           />
         </div>
 
-        <KCheckbox
+        <Checkbox
           v-model="subtitles"
           :label="$tr('subtitlesLabel')"
         />
-
         <KRouterLink
           class="qa-link"
           :to="faqLink"
@@ -172,15 +102,19 @@
           iconAfter="openNewTab"
           target="_blank"
         />
-
-        <!-- Footer with KImg for mobile -->
-        <div class="side-panel-footer">
-          <KImg
-            :src="leLogoSrc"
-            altText="Learning Equality logo"
-            :aspectRatio="getLogoAspectRatio"
-            scaleType="contain"
-            :appearanceOverrides="mobileLogoStyles"
+      </VContainer>
+      <VFooter
+        class="pb-3 pt-2 px-4"
+        color="transparent"
+        height="100"
+      >
+        <div>
+          <VImg
+            height="60"
+            width="90"
+            class="mb-1 mr-2"
+            contain
+            :src="require('shared/images/le-logo.svg')"
           />
           <KExternalLink
             href="https://learningequality.org/"
@@ -188,8 +122,8 @@
             openInNewTab
           />
         </div>
-      </div>
-    </SidePanelModal>
+      </VFooter>
+    </VNavigationDrawer>
   </div>
 
 </template>
@@ -199,41 +133,32 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../constants';
   import CatalogFilterBar from './CatalogFilterBar';
   import { catalogFilterMixin } from './mixins';
   import LanguageFilter from './components/LanguageFilter';
   import MultiSelect from 'shared/views/form/MultiSelect';
   import { constantsTranslationMixin } from 'shared/mixins';
+  import Checkbox from 'shared/views/form/Checkbox';
   import HelpTooltip from 'shared/views/HelpTooltip';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
-  import SidePanelModal from 'shared/views/SidePanelModal';
-
   const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
 
   export default {
     name: 'CatalogFilters',
     components: {
       LanguageFilter,
+      Checkbox,
       HelpTooltip,
       MultiSelect,
       CatalogFilterBar,
-      SidePanelModal,
     },
     mixins: [constantsTranslationMixin, catalogFilterMixin],
-    setup() {
-      const { windowIsLarge } = useKResponsiveWindow();
-      return {
-        windowIsLarge,
-      };
-    },
     data() {
       return {
-        mobileSidePanelIsOpen: false,
+        drawer: false,
         keywordInput: '',
-        leLogoSrc: require('shared/images/le-logo.svg'),
       };
     },
     computed: {
@@ -247,6 +172,9 @@
       faqLink() {
         return { name: RouteNames.CATALOG_FAQ };
       },
+      menuProps() {
+        return { offsetY: true, maxHeight: 270 };
+      },
       kindOptions() {
         return (window.publicKinds || [])
           .map(kind => {
@@ -270,24 +198,6 @@
       setKeywords() {
         return debounce(this.updateKeywords, 500);
       },
-      // LE logo aspect ratio (90x60 = 3:2)
-      getLogoAspectRatio() {
-        return '3:2';
-      },
-      logoStyles() {
-        return {
-          width: '90px',
-          height: '60px',
-          margin: '0 auto 8px auto',
-        };
-      },
-      mobileLogoStyles() {
-        return {
-          width: '80px',
-          height: '53px',
-          margin: '0 auto 8px auto',
-        };
-      },
     },
     watch: {
       keywords() {
@@ -310,7 +220,7 @@
       licenseLabel: 'Licenses',
       formatLabel: 'Formats',
       includesLabel: 'Display only channels with',
-      FilterText: 'Filter',
+      searchText: 'Search',
       coachDescription: 'Resources for coaches are only visible to coaches in Kolibri',
       frequentlyAskedQuestionsLink: 'Frequently asked questions',
       copyright: '© {year} Learning Equality',
@@ -322,40 +232,12 @@
 
 <style lang="scss" scoped>
 
-  .side-panel-container {
-    width: 300px;
-    min-width: 300px;
-    height: calc(100vh - 64px); // Adjust based on app bar height
-    overflow-y: auto;
-    background-color: white;
-    border-right: 1px solid #e0e0e0;
-
-    &.is-rtl {
-      border-left: 1px solid #e0e0e0;
-    }
-  }
-
-  .filters {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    height: 100%;
-    padding: 16px;
+  .v-input--checkbox {
+    margin: 0;
   }
 
-  .mobile-filters {
-    height: auto;
-    padding-bottom: 80px; // Extra space for mobile
-  }
-
-  .mobile-header {
-    padding: 16px;
-
-    h2 {
-      margin: 0;
-      font-size: 1.25rem;
-      font-weight: 600;
-    }
+  ::v-deep .v-messages {
+    display: none;
   }
 
   .subheading {
@@ -365,10 +247,10 @@
     color: gray;
   }
 
-  .checkbox-with-tooltip {
-    display: flex;
-    gap: 8px;
-    align-items: center;
+  .filters {
+    width: 100%;
+    height: calc(100% - 100px);
+    overflow: auto;
   }
 
   .qa-link {
@@ -379,16 +261,4 @@
     margin-top: 10px;
   }
 
-  .side-panel-footer {
-    padding-top: 24px;
-    margin-top: auto;
-    text-align: center;
-    border-top: 1px solid #e0e0e0;
-  }
-
-  // Remove Vuetify-specific styles
-  ::v-deep .v-messages {
-    display: none;
-  }
-
 </style>

From bc530691dd591bebb9c48f761c02fa091a76e0cc Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 12:20:06 +0530
Subject: [PATCH 03/24] added kimg

---
 .../channelList/views/Channel/CatalogFilters.vue  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index a0bdc20bec..e49d0bc367 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -109,12 +109,17 @@
         height="100"
       >
         <div>
-          <VImg
-            height="60"
-            width="90"
-            class="mb-1 mr-2"
-            contain
+          <KImg
             :src="require('shared/images/le-logo.svg')"
+            altText="Learning Equality logo"
+            :aspectRatio="'3:2'"
+            scaleType="contain"
+            :appearanceOverrides="{
+              width: '90px',
+              height: '60px',
+              marginBottom: '8px',
+              marginRight: '8px',
+            }"
           />
           <KExternalLink
             href="https://learningequality.org/"

From 418b6bf056269e000ebdc8383134524e871b1480 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 14:37:43 +0530
Subject: [PATCH 04/24] made new compnent

---
 .../channelList/views/Channel/CatalogList.vue | 72 +++++++++++++------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 00a741531d..a5345d482b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -1,7 +1,7 @@
 <template>
 
-  <div>
-    <CatalogFilters />
+  <CatalogFilters>
+    <!-- Offline banner -->
     <VSlideYTransition>
       <ToolBar
         v-show="offline"
@@ -12,9 +12,10 @@
         <OfflineText />
       </ToolBar>
     </VSlideYTransition>
+
     <VContainer
       fluid
-      :class="$vuetify.breakpoint.xsOnly ? 'pa-0' : 'pa-4'"
+      :class="isMobile ? 'pa-0' : 'pa-4'"
       :style="`margin-top: ${offline ? 48 : 0}`"
     >
       <LoadingText v-if="loading" />
@@ -83,7 +84,7 @@
       <BottomBar
         v-if="selecting"
         data-test="toolbar"
-        :appearanceOverrides="{ height: $vuetify.breakpoint.xsOnly ? '72px' : '56px' }"
+        :appearanceOverrides="{ height: isMobile ? '72px' : '56px' }"
       >
         <div class="mx-2">
           {{ $tr('channelSelectionCount', { count: selectedCount }) }}
@@ -115,7 +116,7 @@
         </KButton>
       </BottomBar>
     </VContainer>
-  </div>
+  </CatalogFilters>
 
 </template>
 
@@ -128,6 +129,7 @@
   import isEqual from 'lodash/isEqual';
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { RouteNames } from '../../constants';
   import CatalogFilters from './CatalogFilters';
   import ChannelItem from './ChannelItem';
@@ -153,24 +155,19 @@
       OfflineText,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      return {
+        isMobile: windowIsSmall,
+      };
+    },
     data() {
       return {
         loading: true,
         loadError: false,
         selecting: false,
-
-        /**
-         * jayoshih: router guard makes it difficult to track
-         * differences between previous query params and new
-         * query params, so just track it manually
-         */
         previousQuery: this.$route.query,
-
-        /**
-         * jayoshih: using excluded logic here instead of selected
-         * to account for selections across pages (some channels
-         * not in current page)
-         */
         excluded: [],
       };
     },
@@ -194,8 +191,8 @@
         },
         set(selected) {
           this.excluded = union(
-            this.excluded.filter(id => !selected.includes(id)), // Remove selected items
-            difference(this.page.results, selected), // Add non-selected items
+            this.excluded.filter(id => !selected.includes(id)),
+            difference(this.page.results, selected),
           );
         },
       },
@@ -206,8 +203,6 @@
         return RouteNames.CATALOG_DETAILS;
       },
       channels() {
-        // Sort again by the same ordering used on the backend - name.
-        // Have to do this because of how we are getting the object data via getChannels.
         return sortBy(this.getChannels(this.page.results), 'name');
       },
       selectedCount() {
@@ -220,7 +215,6 @@
           this.loading = true;
           this.debouncedSearch();
 
-          // Reset selection mode if a filter is changed (ignore page)
           const ignoreDefaults = { page: 0 };
           const toQuery = { ...to.query, ...ignoreDefaults };
           const fromQuery = { ...this.previousQuery, ...ignoreDefaults };
@@ -288,7 +282,7 @@
       cancelButton: 'Cancel',
       downloadButton: 'Download',
       downloadCSV: 'Download CSV',
-      downloadPDF: 'Download PDF', // Kevin demanded NO DOTS!!!
+      downloadPDF: 'Download PDF',
       downloadingMessage: 'Download started',
       channelSelectionCount:
         '{count, plural,\n =1 {# channel selected}\n other {# channels selected}}',
@@ -301,9 +295,41 @@
 
 <style lang="scss" scoped>
 
+  .catalog-page-wrapper {
+    display: flex;
+    min-height: 100vh;
+  }
+
+  .catalog-main-content {
+    flex: 1;
+    min-height: calc(100vh - 64px);
+
+    &.with-sidebar {
+      margin-left: 346px; // Width of the side panel
+    }
+  }
+
+  // RTL support
+  [dir='rtl'] .catalog-main-content.with-sidebar {
+    margin-right: 346px;
+    margin-left: 0;
+  }
+
   .list-wrapper {
     max-width: 1080px;
     margin: 0 auto;
   }
 
+  // Mobile layout
+  @media (max-width: 600px) {
+    .catalog-page-wrapper {
+      flex-direction: column;
+    }
+
+    .catalog-main-content.with-sidebar {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
 </style>

From 15915ad6311d55a05bd0fcc2fce415a866260cee Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 14:38:01 +0530
Subject: [PATCH 05/24] made new compnent

---
 .../Channel/CatalogFilterPanelContent.vue     | 248 ++++++++++++++++++
 1 file changed, 248 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
new file mode 100644
index 0000000000..c3e840a0b3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -0,0 +1,248 @@
+<template>
+
+  <div class="filter-panel-content">
+    <!-- Close button for mobile modal -->
+
+    <div class="filters-container">
+      <!-- Keyword search -->
+      <KTextbox
+        v-model="keywordInput"
+        :label="$tr('searchLabel')"
+        :clearable="true"
+        data-test="keywords"
+        @input="setKeywords"
+      />
+
+      <!-- Language -->
+      <LanguageFilter
+        v-model="languages"
+        :menu-props="menuProps"
+      />
+
+      <!-- License -->
+      <MultiSelect
+        v-if="!libraryMode"
+        v-model="licenses"
+        :items="licenseOptions"
+        :label="$tr('licenseLabel')"
+      />
+
+      <!-- Formats -->
+      <MultiSelect
+        v-model="kinds"
+        :items="kindOptions"
+        :label="$tr('formatLabel')"
+      />
+
+      <!-- Starred -->
+      <Checkbox
+        v-if="loggedIn"
+        v-model="bookmark"
+        :label="$tr('starredLabel')"
+      />
+
+      <!-- Includes -->
+      <div class="subheading">
+        {{ $tr('includesLabel') }}
+      </div>
+
+      <div class="checkbox-with-tooltip">
+        <Checkbox
+          v-model="coach"
+          aria-describedby="tooltip-coach"
+          :label="$tr('coachLabel')"
+        />
+        <HelpTooltip
+          :text="$tr('coachDescription')"
+          maxWidth="250px"
+          tooltipId="tooltip-coach"
+        />
+      </div>
+
+      <Checkbox
+        v-model="subtitles"
+        :label="$tr('subtitlesLabel')"
+      />
+
+      <KRouterLink
+        class="qa-link"
+        :to="faqLink"
+        :text="$tr('frequentlyAskedQuestionsLink')"
+        appearance="basic-link"
+        iconAfter="openNewTab"
+        target="_blank"
+      />
+    </div>
+
+    <!-- Footer with logo -->
+    <div class="panel-footer">
+      <KImg
+        :src="require('shared/images/le-logo.svg')"
+        altText="Learning Equality logo"
+        :aspectRatio="'3:2'"
+        scaleType="contain"
+        :appearanceOverrides="{
+          width: '90px',
+          height: '60px',
+          marginBottom: '8px',
+          marginRight: '8px',
+        }"
+      />
+      <KExternalLink
+        href="https://learningequality.org/"
+        :text="$tr('copyright', { year: new Date().getFullYear() })"
+        openInNewTab
+      />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapGetters } from 'vuex';
+  import debounce from 'lodash/debounce';
+  import { RouteNames } from '../../constants';
+  import { catalogFilterMixin } from './mixins';
+  import LanguageFilter from './components/LanguageFilter';
+  import MultiSelect from 'shared/views/form/MultiSelect';
+  import { constantsTranslationMixin } from 'shared/mixins';
+  import Checkbox from 'shared/views/form/Checkbox';
+  import HelpTooltip from 'shared/views/HelpTooltip';
+  import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+
+  const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
+
+  export default {
+    name: 'CatalogFilterPanelContent',
+    components: {
+      LanguageFilter,
+      Checkbox,
+      HelpTooltip,
+      MultiSelect,
+    },
+    mixins: [constantsTranslationMixin, catalogFilterMixin],
+
+    data() {
+      return {
+        keywordInput: '',
+      };
+    },
+    computed: {
+      ...mapGetters(['loggedIn']),
+      libraryMode() {
+        return window.libraryMode;
+      },
+      faqLink() {
+        return { name: RouteNames.CATALOG_FAQ };
+      },
+      menuProps() {
+        return { offsetY: true, maxHeight: 270 };
+      },
+      kindOptions() {
+        return (window.publicKinds || [])
+          .map(kind => {
+            if (!excludedKinds.has(kind)) {
+              return {
+                value: kind,
+                text: this.translateConstant(kind),
+              };
+            }
+          })
+          .filter(Boolean);
+      },
+      licenseOptions() {
+        return (window.publicLicenses || []).map(id => {
+          return {
+            value: Number(id),
+            text: this.translateLicense(Number(id)),
+          };
+        });
+      },
+      setKeywords() {
+        return debounce(this.updateKeywords, 500);
+      },
+    },
+    watch: {
+      keywords() {
+        this.keywordInput = this.keywords;
+      },
+    },
+    beforeMount() {
+      this.keywordInput = this.$route.query.keywords;
+    },
+    methods: {
+      updateKeywords() {
+        this.keywords = this.keywordInput;
+      },
+    },
+    $trs: {
+      searchLabel: 'Keywords',
+      coachLabel: 'Resources for coaches',
+      subtitlesLabel: 'Captions or subtitles',
+      starredLabel: 'Starred',
+      licenseLabel: 'Licenses',
+      formatLabel: 'Formats',
+      includesLabel: 'Display only channels with',
+      coachDescription: 'Resources for coaches are only visible to coaches in Kolibri',
+      frequentlyAskedQuestionsLink: 'Frequently asked questions',
+      copyright: '© {year} Learning Equality',
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .filter-panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .mobile-header {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+
+    .mobile-title {
+      margin: 0 0 0 16px;
+      font-size: 1.25rem;
+      font-weight: 500;
+    }
+  }
+
+  .filters-container {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+  }
+
+  .checkbox-with-tooltip {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .subheading {
+    margin-top: 20px;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: gray;
+  }
+
+  .qa-link {
+    display: block;
+    margin-top: 24px;
+  }
+
+  .panel-footer {
+    padding: 16px;
+    text-align: center;
+    border-top: 1px solid #e0e0e0;
+  }
+
+</style>

From 0c08d8516a90fcf558260f6babb2e2ce08eacf2d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 14:39:43 +0530
Subject: [PATCH 06/24] updated catalog filters

---
 .../views/Channel/CatalogFilters.vue          | 312 ++++++------------
 1 file changed, 100 insertions(+), 212 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index e49d0bc367..ed5735e0c2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -1,134 +1,45 @@
 <template>
 
-  <div>
+  <div class="catalog-filters-wrapper">
+    <!-- Mobile: Filter button that opens SidePanelModal -->
     <KButton
-      v-if="$vuetify.breakpoint.xsOnly"
-      class="drawer-btn"
+      v-if="isMobile"
+      class="filter-button-mobile"
       :text="$tr('searchText')"
       appearance="raised-button"
-      @click.stop="drawer = true"
+      @click="openSidePanel"
     />
-    <CatalogFilterBar />
-    <VNavigationDrawer
-      v-model="drawer"
-      :permanent="$vuetify.breakpoint.smAndUp"
-      app
-      disable-route-watcher
-      :clipped="$vuetify.breakpoint.smAndUp"
-      :right="isRTL"
-    >
-      <VContainer class="filters pa-3">
-        <VToolbar
-          v-if="$vuetify.breakpoint.xsOnly"
-          color="transparent"
-          flat
-          dense
-        >
-          <VSpacer />
-          <VBtn
-            icon
-            flat
-            style="text-align: right"
-            @click="drawer = false"
-          >
-            <Icon icon="clear" />
-          </VBtn>
-        </VToolbar>
-
-        <!-- Keyword search -->
-        <KTextbox
-          v-model="keywordInput"
-          :label="$tr('searchLabel')"
-          :clearable="true"
-          data-test="keywords"
-          @input="setKeywords"
-        />
-
-        <!-- Language -->
-        <LanguageFilter
-          v-model="languages"
-          :menu-props="menuProps"
-        />
-
-        <!-- License (attach to self to keep in notranslate class) -->
-        <MultiSelect
-          v-if="!libraryMode"
-          v-model="licenses"
-          :items="licenseOptions"
-          :label="$tr('licenseLabel')"
-        />
-
-        <!-- Formats (attach to self to keep in notranslate class) -->
-        <MultiSelect
-          v-model="kinds"
-          :items="kindOptions"
-          :label="$tr('formatLabel')"
-        />
-
-        <!-- Starred -->
-        <Checkbox
-          v-if="loggedIn"
-          v-model="bookmark"
-          :label="$tr('starredLabel')"
-        />
-
-        <!-- Includes -->
-        <div class="subheading">
-          {{ $tr('includesLabel') }}
-        </div>
 
-        <div :style="{ display: 'flex', alignItems: 'center' }">
-          <Checkbox
-            v-model="coach"
-            aria-describedby="tooltip-coach"
-            :label="$tr('coachLabel')"
-          />
-          <HelpTooltip
-            :text="$tr('coachDescription')"
-            maxWidth="250px"
-            tooltipId="tooltip-coach"
-          />
-        </div>
+    <!-- Desktop/Tablet: Permanent side panel as page section -->
+    <aside
+      v-if="!isMobile"
+      class="filter-panel-desktop"
+      :class="{ 'filter-panel-rtl': isRTL }"
+    >
+      <CatalogFilterPanelContent />
+    </aside>
 
-        <Checkbox
-          v-model="subtitles"
-          :label="$tr('subtitlesLabel')"
-        />
-        <KRouterLink
-          class="qa-link"
-          :to="faqLink"
-          :text="$tr('frequentlyAskedQuestionsLink')"
-          appearance="basic-link"
-          iconAfter="openNewTab"
-          target="_blank"
-        />
-      </VContainer>
-      <VFooter
-        class="pb-3 pt-2 px-4"
-        color="transparent"
-        height="100"
-      >
-        <div>
-          <KImg
-            :src="require('shared/images/le-logo.svg')"
-            altText="Learning Equality logo"
-            :aspectRatio="'3:2'"
-            scaleType="contain"
-            :appearanceOverrides="{
-              width: '90px',
-              height: '60px',
-              marginBottom: '8px',
-              marginRight: '8px',
-            }"
-          />
-          <KExternalLink
-            href="https://learningequality.org/"
-            :text="$tr('copyright', { year: new Date().getFullYear() })"
-            openInNewTab
-          />
-        </div>
-      </VFooter>
-    </VNavigationDrawer>
+    <!-- Main content area that includes CatalogFilterBar and the list -->
+    <div
+      class="main-content-area"
+      :class="{ 'with-sidebar': !isMobile }"
+    >
+      <CatalogFilterBar />
+      <slot></slot>
+    </div>
+
+    <!-- Mobile: SidePanelModal for filters (full width) -->
+    <SidePanelModal
+      v-if="isMobile && showMobilePanel"
+      alignment="left"
+      fullscreen
+      @closePanel="closeSidePanel"
+    >
+      <CatalogFilterPanelContent
+        :show-close-button="true"
+        @close="closeSidePanel"
+      />
+    </SidePanelModal>
   </div>
 
 </template>
@@ -136,99 +47,45 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
-  import debounce from 'lodash/debounce';
-  import { RouteNames } from '../../constants';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CatalogFilterBar from './CatalogFilterBar';
-  import { catalogFilterMixin } from './mixins';
-  import LanguageFilter from './components/LanguageFilter';
-  import MultiSelect from 'shared/views/form/MultiSelect';
-  import { constantsTranslationMixin } from 'shared/mixins';
-  import Checkbox from 'shared/views/form/Checkbox';
-  import HelpTooltip from 'shared/views/HelpTooltip';
-  import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
-
-  const excludedKinds = new Set([ContentKindsNames.TOPIC, ContentKindsNames.H5P]);
+  import CatalogFilterPanelContent from './CatalogFilterPanelContent';
+  import SidePanelModal from 'shared/views/SidePanelModal';
 
   export default {
     name: 'CatalogFilters',
     components: {
-      LanguageFilter,
-      Checkbox,
-      HelpTooltip,
-      MultiSelect,
       CatalogFilterBar,
+      CatalogFilterPanelContent,
+      SidePanelModal,
+    },
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+
+      return {
+        isMobile: windowIsSmall,
+      };
     },
-    mixins: [constantsTranslationMixin, catalogFilterMixin],
     data() {
       return {
-        drawer: false,
-        keywordInput: '',
+        showMobilePanel: false,
       };
     },
     computed: {
-      ...mapGetters(['loggedIn']),
       isRTL() {
         return window.isRTL;
       },
-      libraryMode() {
-        return window.libraryMode;
-      },
-      faqLink() {
-        return { name: RouteNames.CATALOG_FAQ };
-      },
-      menuProps() {
-        return { offsetY: true, maxHeight: 270 };
-      },
-      kindOptions() {
-        return (window.publicKinds || [])
-          .map(kind => {
-            if (!excludedKinds.has(kind)) {
-              return {
-                value: kind,
-                text: this.translateConstant(kind),
-              };
-            }
-          })
-          .filter(Boolean);
-      },
-      licenseOptions() {
-        return (window.publicLicenses || []).map(id => {
-          return {
-            value: Number(id),
-            text: this.translateLicense(Number(id)),
-          };
-        });
-      },
-      setKeywords() {
-        return debounce(this.updateKeywords, 500);
-      },
-    },
-    watch: {
-      keywords() {
-        this.keywordInput = this.keywords;
-      },
-    },
-    beforeMount() {
-      this.keywordInput = this.$route.query.keywords;
     },
     methods: {
-      updateKeywords() {
-        this.keywords = this.keywordInput;
+      openSidePanel() {
+        this.showMobilePanel = true;
+      },
+      closeSidePanel() {
+        this.showMobilePanel = false;
       },
     },
     $trs: {
-      searchLabel: 'Keywords',
-      coachLabel: 'Resources for coaches',
-      subtitlesLabel: 'Captions or subtitles',
-      starredLabel: 'Starred',
-      licenseLabel: 'Licenses',
-      formatLabel: 'Formats',
-      includesLabel: 'Display only channels with',
       searchText: 'Search',
-      coachDescription: 'Resources for coaches are only visible to coaches in Kolibri',
-      frequentlyAskedQuestionsLink: 'Frequently asked questions',
-      copyright: '© {year} Learning Equality',
     },
   };
 
@@ -237,33 +94,64 @@
 
 <style lang="scss" scoped>
 
-  .v-input--checkbox {
-    margin: 0;
+  .catalog-filters-wrapper {
+    display: flex;
+    min-height: 100vh;
   }
 
-  ::v-deep .v-messages {
-    display: none;
+  .filter-button-mobile {
+    margin: 16px;
   }
 
-  .subheading {
-    margin-top: 20px;
-    margin-bottom: 5px;
-    font-weight: bold;
-    color: gray;
+  .filter-panel-desktop {
+    position: fixed;
+    left: 0;
+    z-index: 7;
+    width: 335px;
+    overflow-y: auto;
+
+    &.filter-panel-rtl {
+      right: 0;
+      left: auto;
+      border-left: 1px solid #e0e0e0;
+    }
   }
 
-  .filters {
-    width: 100%;
-    height: calc(100% - 100px);
-    overflow: auto;
+  .main-content-area {
+    min-height: calc(100vh - 64px);
+
+    &.with-sidebar {
+      margin-left: 335px; /* Channels start from 335px from left */
+    }
   }
 
-  .qa-link {
-    margin-top: 24px;
+  // RTL support
+  [dir='rtl'] .main-content-area.with-sidebar {
+    margin-right: 346px;
+    margin-left: 0;
   }
 
-  .drawer-btn {
-    margin-top: 10px;
+  // Mobile layout
+  @media (max-width: 600px) {
+    .catalog-filters-wrapper {
+      flex-direction: column;
+    }
+
+    .main-content-area.with-sidebar {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    .filter-panel-desktop {
+      display: none;
+    }
+
+    .filter-button-mobile {
+      align-self: flex-start;
+      width: auto; /* Ensure button doesn't stretch on mobile either */
+    }
   }
 
+  // Mobile full-width modal is handled by SidePanelModal with fullscreen prop
+
 </style>

From da50d200fc5b25e950b583cdafd460e16c6c9669 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 14:53:04 +0530
Subject: [PATCH 07/24] updated catalog filters

---
 .../channelList/views/Channel/CatalogFilterPanelContent.vue      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index c3e840a0b3..54740e0bc8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -10,6 +10,7 @@
         :label="$tr('searchLabel')"
         :clearable="true"
         data-test="keywords"
+        :appearanceOverrides="{ maxWidth: '100%' }"
         @input="setKeywords"
       />
 

From 1a285c8a1799444c4aa8cc969c273c1a70a55a11 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 14:56:29 +0530
Subject: [PATCH 08/24] updated catalog filters

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index ed5735e0c2..32cc7cc89b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -118,6 +118,7 @@
   }
 
   .main-content-area {
+    flex: 1;
     min-height: calc(100vh - 64px);
 
     &.with-sidebar {

From f33f78a23612dd26e2cb635be5e9d5d543c14f7b Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Fri, 14 Nov 2025 15:11:40 +0530
Subject: [PATCH 09/24] updated catalog filters

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue      | 3 ++-
 .../frontend/channelList/views/Channel/CatalogList.vue         | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 32cc7cc89b..3047e7da02 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -128,7 +128,7 @@
 
   // RTL support
   [dir='rtl'] .main-content-area.with-sidebar {
-    margin-right: 346px;
+    margin-right: 335px;
     margin-left: 0;
   }
 
@@ -145,6 +145,7 @@
 
     .filter-panel-desktop {
       display: none;
+      height: calc(100vh - 64px);
     }
 
     .filter-button-mobile {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index a5345d482b..28819f8280 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -15,7 +15,7 @@
 
     <VContainer
       fluid
-      :class="isMobile ? 'pa-0' : 'pa-4'"
+      class="pb-4 pl-4 pr-4"
       :style="`margin-top: ${offline ? 48 : 0}`"
     >
       <LoadingText v-if="loading" />

From 2a7bb0254f48a1c537c12922640814d0174f961d Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 15 Nov 2025 11:22:20 +0530
Subject: [PATCH 10/24] updated styles

---
 .../channelList/views/Channel/CatalogFilterPanelContent.vue     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index 54740e0bc8..bf944e16d0 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -207,7 +207,6 @@
     display: flex;
     align-items: center;
     padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
 
     .mobile-title {
       margin: 0 0 0 16px;
@@ -243,7 +242,6 @@
   .panel-footer {
     padding: 16px;
     text-align: center;
-    border-top: 1px solid #e0e0e0;
   }
 
 </style>

From d5392172f32af1e50567e3b5f07cd75cd3289af6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 15 Nov 2025 11:48:44 +0530
Subject: [PATCH 11/24] updated styles

---
 .../channelList/views/Channel/CatalogFilterPanelContent.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index bf944e16d0..c31b4181de 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -241,7 +241,7 @@
 
   .panel-footer {
     padding: 16px;
-    text-align: center;
+    text-align: start;
   }
 
 </style>

From de60817d0de2b9661b80a160f009172e222d2223 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sat, 15 Nov 2025 12:02:23 +0530
Subject: [PATCH 12/24] done

---
 .../channelList/views/Channel/CatalogFilterPanelContent.vue | 3 ++-
 .../frontend/channelList/views/Channel/CatalogFilters.vue   | 6 ++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index c31b4181de..c5346a7508 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -200,7 +200,7 @@
   .filter-panel-content {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: calc(100vh - 100px);
   }
 
   .mobile-header {
@@ -217,6 +217,7 @@
 
   .filters-container {
     flex: 1;
+    min-height: 0;
     padding: 16px;
     overflow-y: auto;
   }
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 3047e7da02..4794731938 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -108,6 +108,7 @@
     left: 0;
     z-index: 7;
     width: 335px;
+    height: 100vh; /* Make desktop panel full height */
     overflow-y: auto;
 
     &.filter-panel-rtl {
@@ -145,15 +146,12 @@
 
     .filter-panel-desktop {
       display: none;
-      height: calc(100vh - 64px);
     }
 
     .filter-button-mobile {
       align-self: flex-start;
-      width: auto; /* Ensure button doesn't stretch on mobile either */
+      width: auto;
     }
   }
 
-  // Mobile full-width modal is handled by SidePanelModal with fullscreen prop
-
 </style>

From ce9a4ea3d1e4f4ce923888d6a2d2f8362d0f3f86 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 14:56:24 +0530
Subject: [PATCH 13/24] done

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue   | 1 -
 .../frontend/channelList/views/Channel/CatalogList.vue      | 6 ------
 2 files changed, 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 4794731938..61eef8c594 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -114,7 +114,6 @@
     &.filter-panel-rtl {
       right: 0;
       left: auto;
-      border-left: 1px solid #e0e0e0;
     }
   }
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 28819f8280..c0e1f5b31a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -309,12 +309,6 @@
     }
   }
 
-  // RTL support
-  [dir='rtl'] .catalog-main-content.with-sidebar {
-    margin-right: 346px;
-    margin-left: 0;
-  }
-
   .list-wrapper {
     max-width: 1080px;
     margin: 0 auto;

From 63889e30d45b4884c6f18fd1bf6d8e939d96cdbf Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 15:01:21 +0530
Subject: [PATCH 14/24] updated styles

---
 .../frontend/channelList/views/Channel/CatalogList.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index c0e1f5b31a..a50af7b22b 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -315,15 +315,5 @@
   }
 
   // Mobile layout
-  @media (max-width: 600px) {
-    .catalog-page-wrapper {
-      flex-direction: column;
-    }
-
-    .catalog-main-content.with-sidebar {
-      margin-right: 0;
-      margin-left: 0;
-    }
-  }
 
 </style>

From e885addea6afddcb5c6ad7fde1058b6ff1201e15 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 15:14:38 +0530
Subject: [PATCH 15/24] Preserved the rtl support

---
 .../channelList/views/Channel/CatalogFilters.vue    | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 61eef8c594..ef901e65cf 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -104,7 +104,6 @@
   }
 
   .filter-panel-desktop {
-    position: fixed;
     left: 0;
     z-index: 7;
     width: 335px;
@@ -120,19 +119,7 @@
   .main-content-area {
     flex: 1;
     min-height: calc(100vh - 64px);
-
-    &.with-sidebar {
-      margin-left: 335px; /* Channels start from 335px from left */
-    }
   }
-
-  // RTL support
-  [dir='rtl'] .main-content-area.with-sidebar {
-    margin-right: 335px;
-    margin-left: 0;
-  }
-
-  // Mobile layout
   @media (max-width: 600px) {
     .catalog-filters-wrapper {
       flex-direction: column;

From b5d3230be90ebc4c30bf0af1aa2446f545040cd7 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 15:32:44 +0530
Subject: [PATCH 16/24] fine tuning styling

---
 .../views/Channel/CatalogFilterPanelContent.vue           | 2 +-
 .../frontend/channelList/views/Channel/CatalogFilters.vue | 8 --------
 .../frontend/channelList/views/Channel/CatalogList.vue    | 6 ------
 3 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index c5346a7508..cac234ceb8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -200,7 +200,7 @@
   .filter-panel-content {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 120px);
   }
 
   .mobile-header {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index ef901e65cf..189bd9e03f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -96,7 +96,6 @@
 
   .catalog-filters-wrapper {
     display: flex;
-    min-height: 100vh;
   }
 
   .filter-button-mobile {
@@ -107,18 +106,11 @@
     left: 0;
     z-index: 7;
     width: 335px;
-    height: 100vh; /* Make desktop panel full height */
     overflow-y: auto;
-
-    &.filter-panel-rtl {
-      right: 0;
-      left: auto;
-    }
   }
 
   .main-content-area {
     flex: 1;
-    min-height: calc(100vh - 64px);
   }
   @media (max-width: 600px) {
     .catalog-filters-wrapper {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index a50af7b22b..d44c988e6a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -303,10 +303,6 @@
   .catalog-main-content {
     flex: 1;
     min-height: calc(100vh - 64px);
-
-    &.with-sidebar {
-      margin-left: 346px; // Width of the side panel
-    }
   }
 
   .list-wrapper {
@@ -314,6 +310,4 @@
     margin: 0 auto;
   }
 
-  // Mobile layout
-
 </style>

From 44458e31fc2f60c6728b7a53937b81f309d4309e Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 16:14:38 +0530
Subject: [PATCH 17/24] added styles

---
 .../channelList/views/Channel/CatalogFilterPanelContent.vue | 6 ++++--
 .../frontend/channelList/views/Channel/CatalogFilters.vue   | 5 +----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index cac234ceb8..f0f9a12a4a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -43,7 +43,10 @@
       />
 
       <!-- Includes -->
-      <div class="subheading">
+      <div
+        class="subheading"
+        :style="{ color: $themeTokens.annotation }"
+      >
         {{ $tr('includesLabel') }}
       </div>
 
@@ -232,7 +235,6 @@
     margin-top: 20px;
     margin-bottom: 5px;
     font-weight: bold;
-    color: gray;
   }
 
   .qa-link {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 189bd9e03f..458965be99 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -35,10 +35,7 @@
       fullscreen
       @closePanel="closeSidePanel"
     >
-      <CatalogFilterPanelContent
-        :show-close-button="true"
-        @close="closeSidePanel"
-      />
+      <CatalogFilterPanelContent />
     </SidePanelModal>
   </div>
 

From 17d14ea285dc50f5a7eb5fea4d3d18d61d26b8c8 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 16:23:33 +0530
Subject: [PATCH 18/24] removed z-index

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 458965be99..8c19b66d6f 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -100,8 +100,8 @@
   }
 
   .filter-panel-desktop {
+    top: 64px;
     left: 0;
-    z-index: 7;
     width: 335px;
     overflow-y: auto;
   }

From 7db0eb048836c4fa68a4e1f3b1db739da6822fa6 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 16:35:20 +0530
Subject: [PATCH 19/24] done

---
 .../channelList/views/Channel/CatalogList.vue | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index d44c988e6a..406e4e0d32 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -1,7 +1,6 @@
 <template>
 
   <CatalogFilters>
-    <!-- Offline banner -->
     <VSlideYTransition>
       <ToolBar
         v-show="offline"
@@ -12,7 +11,6 @@
         <OfflineText />
       </ToolBar>
     </VSlideYTransition>
-
     <VContainer
       fluid
       class="pb-4 pl-4 pr-4"
@@ -167,7 +165,19 @@
         loading: true,
         loadError: false,
         selecting: false,
+
+        /**
+         * jayoshih: router guard makes it difficult to track
+         * differences between previous query params and new
+         * query params, so just track it manually
+         */
         previousQuery: this.$route.query,
+
+        /**
+         * jayoshih: using excluded logic here instead of selected
+         * to account for selections across pages (some channels
+         * not in current page)
+         */
         excluded: [],
       };
     },
@@ -191,8 +201,8 @@
         },
         set(selected) {
           this.excluded = union(
-            this.excluded.filter(id => !selected.includes(id)),
-            difference(this.page.results, selected),
+            this.excluded.filter(id => !selected.includes(id)), // Remove selected items
+            difference(this.page.results, selected), // Add non-selected items
           );
         },
       },
@@ -203,6 +213,8 @@
         return RouteNames.CATALOG_DETAILS;
       },
       channels() {
+        // Sort again by the same ordering used on the backend - name.
+        // Have to do this because of how we are getting the object data via getChannels.
         return sortBy(this.getChannels(this.page.results), 'name');
       },
       selectedCount() {
@@ -215,6 +227,7 @@
           this.loading = true;
           this.debouncedSearch();
 
+          // Reset selection mode if a filter is changed (ignore page)
           const ignoreDefaults = { page: 0 };
           const toQuery = { ...to.query, ...ignoreDefaults };
           const fromQuery = { ...this.previousQuery, ...ignoreDefaults };
@@ -282,7 +295,7 @@
       cancelButton: 'Cancel',
       downloadButton: 'Download',
       downloadCSV: 'Download CSV',
-      downloadPDF: 'Download PDF',
+      downloadPDF: 'Download PDF', // Kevin demanded NO DOTS!!!
       downloadingMessage: 'Download started',
       channelSelectionCount:
         '{count, plural,\n =1 {# channel selected}\n other {# channels selected}}',

From e1d0172e0bfac0357d16ea2933f29572d4b5ecdd Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Sun, 16 Nov 2025 17:15:24 +0530
Subject: [PATCH 20/24] Scrolling fixes

---
 .../views/Channel/CatalogFilterPanelContent.vue    | 14 +-------------
 .../channelList/views/Channel/CatalogFilters.vue   |  9 ++++++++-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
index f0f9a12a4a..b66a9b2db5 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
@@ -203,19 +203,7 @@
   .filter-panel-content {
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 120px);
-  }
-
-  .mobile-header {
-    display: flex;
-    align-items: center;
-    padding: 16px;
-
-    .mobile-title {
-      margin: 0 0 0 16px;
-      font-size: 1.25rem;
-      font-weight: 500;
-    }
+    height: calc(100vh - 96px);
   }
 
   .filters-container {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 8c19b66d6f..303e5b6b21 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -100,7 +100,8 @@
   }
 
   .filter-panel-desktop {
-    top: 64px;
+    position: fixed;
+    top: 100px;
     left: 0;
     width: 335px;
     overflow-y: auto;
@@ -108,6 +109,12 @@
 
   .main-content-area {
     flex: 1;
+    width: 100%;
+    min-height: 100vh;
+
+    &.with-sidebar {
+      margin-left: 335px;
+    }
   }
   @media (max-width: 600px) {
     .catalog-filters-wrapper {

From 56bc3fc6926cfd9dcb897d0442e69ab871b45e0c Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 17 Nov 2025 01:31:27 +0530
Subject: [PATCH 21/24] Updated tests

---
 .../Channel/__tests__/catalogFilters.spec.js  | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
index 22acb35886..3a6a7198a3 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { factory } from '../../../store';
 import router from '../../../router';
 import CatalogFilters from '../CatalogFilters';
+import CatalogFilterPanelContent from '../CatalogFilterPanelContent';
 
 const store = factory();
 
@@ -24,25 +25,44 @@ describe('catalogFilters', () => {
   });
 
   describe('keywords', () => {
-    it('should call setKeywords when keywords change', () => {
-      const setKeywordsMock = jest.fn();
-      const setKeywords = () => {
-        return () => {
-          setKeywordsMock();
-        };
-      };
-      wrapper = makeWrapper({ setKeywords });
-      const keywords = wrapper.find('[data-test="keywords"]');
-      keywords.element.value = 'test';
-      keywords.trigger('input');
-      expect(setKeywordsMock).toHaveBeenCalled();
+    it('should update keywords data when updateKeywords is called', async () => {
+      wrapper = mount(CatalogFilterPanelContent, {
+        sync: false,
+        router,
+        store,
+      });
+
+      await wrapper.setData({ keywordInput: 'initial value' });
+
+      wrapper.vm.updateKeywords();
+
+      expect(wrapper.vm.keywords).toBe('initial value');
+    });
+
+    it('keywordInput should sync with route query parameters on mount', async () => {
+      const keywords = 'route keywords';
+      await router.push({ query: { keywords } });
+
+      wrapper = mount(CatalogFilterPanelContent, {
+        sync: false,
+        router,
+        store,
+      });
+
+      expect(wrapper.vm.keywordInput).toBe(keywords);
     });
-    it('keywordInput should stay in sync with query param', () => {
-      const keywords = 'testing new keyword';
-      router.push({ query: { keywords } });
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.keywordInput).toBe(keywords);
+
+    it('keywordInput should update when route query parameters change', async () => {
+      wrapper = mount(CatalogFilterPanelContent, {
+        sync: false,
+        router,
+        store,
       });
+
+      const keywords = 'new route keywords';
+      await router.push({ query: { keywords } });
+
+      expect(wrapper.vm.keywordInput).toBe(keywords);
     });
   });
 });

From ddc772682073b9961609dd3c650d0873134b026a Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 17 Nov 2025 19:06:29 +0530
Subject: [PATCH 22/24] Preserved previous flat button

---
 .../frontend/channelList/views/Channel/CatalogFilters.vue      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 303e5b6b21..96d6eb461c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -6,7 +6,8 @@
       v-if="isMobile"
       class="filter-button-mobile"
       :text="$tr('searchText')"
-      appearance="raised-button"
+      primary
+      appearance="flat-button"
       @click="openSidePanel"
     />
 

From d15bb9076cff45a7adb8a1823248373480e411a0 Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Mon, 17 Nov 2025 19:24:41 +0530
Subject: [PATCH 23/24] Made test file for catalogfilterpanelcontent

---
 .../views/Channel/CatalogFilters.vue          |  2 +-
 .../CatalogFilterPanelContent.spec.js         | 86 +++++++++++++++++++
 .../Channel/__tests__/catalogFilters.spec.js  |  2 +-
 .../CatalogFilterPanelContent.vue             |  6 +-
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/CatalogFilterPanelContent.spec.js
 rename contentcuration/contentcuration/frontend/channelList/views/Channel/{ => components}/CatalogFilterPanelContent.vue (97%)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
index 96d6eb461c..9a34987e31 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilters.vue
@@ -47,7 +47,7 @@
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CatalogFilterBar from './CatalogFilterBar';
-  import CatalogFilterPanelContent from './CatalogFilterPanelContent';
+  import CatalogFilterPanelContent from './components/CatalogFilterPanelContent.vue';
   import SidePanelModal from 'shared/views/SidePanelModal';
 
   export default {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/CatalogFilterPanelContent.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/CatalogFilterPanelContent.spec.js
new file mode 100644
index 0000000000..df41efba8d
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/CatalogFilterPanelContent.spec.js
@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/vue';
+import { Store } from 'vuex';
+import VueRouter from 'vue-router';
+import CatalogFilterPanelContent from '../components/CatalogFilterPanelContent.vue';
+
+const mockRouter = new VueRouter({
+  routes: [{ name: 'CATALOG_FAQ', path: '/catalog/faq' }],
+});
+
+const createStore = () => {
+  return new Store({
+    getters: {
+      loggedIn: () => true,
+    },
+  });
+};
+
+const renderComponent = () => {
+  const store = createStore();
+
+  return render(CatalogFilterPanelContent, {
+    store,
+    routes: mockRouter,
+  });
+};
+
+beforeEach(() => {
+  window.libraryMode = false;
+  window.publicKinds = ['video', 'audio', 'document'];
+  window.publicLicenses = [1, 2, 3];
+});
+
+describe('CatalogFilterPanelContent', () => {
+  it('renders all filter components', () => {
+    renderComponent();
+
+    expect(screen.getByLabelText('Keywords')).toBeInTheDocument();
+    expect(screen.getByLabelText('Licenses')).toBeInTheDocument();
+    expect(screen.getByLabelText('Formats')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Starred' })).toBeInTheDocument();
+    expect(screen.getByText('Display only channels with')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Resources for coaches' })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Captions or subtitles' })).toBeInTheDocument();
+    expect(screen.getByText('Frequently asked questions')).toBeInTheDocument();
+    expect(screen.getByAltText('Learning Equality logo')).toBeInTheDocument();
+  });
+
+  it('renders keyword search input', () => {
+    renderComponent();
+    expect(screen.getByLabelText('Keywords')).toBeInTheDocument();
+  });
+
+  it('hides license filter in library mode', () => {
+    window.libraryMode = true;
+    renderComponent();
+    expect(screen.queryByLabelText('Licenses')).not.toBeInTheDocument();
+  });
+
+  it('shows license filter in non-library mode', () => {
+    window.libraryMode = false;
+    renderComponent();
+    expect(screen.getByLabelText('Licenses')).toBeInTheDocument();
+  });
+
+  it('renders help tooltip for coach resources', () => {
+    renderComponent();
+    expect(screen.getByRole('checkbox', { name: 'Resources for coaches' })).toBeInTheDocument();
+  });
+
+  it('renders footer with copyright', () => {
+    renderComponent();
+    const currentYear = new Date().getFullYear();
+    expect(screen.getByText(`© ${currentYear} Learning Equality`)).toBeInTheDocument();
+  });
+
+  it('renders FAQ link with external icon', () => {
+    renderComponent();
+    const faqLink = screen.getByText('Frequently asked questions');
+    expect(faqLink).toBeInTheDocument();
+  });
+
+  it('renders language filter', () => {
+    renderComponent();
+    expect(screen.getByText('Languages')).toBeInTheDocument();
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
index 3a6a7198a3..1703435b6e 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/catalogFilters.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { factory } from '../../../store';
 import router from '../../../router';
 import CatalogFilters from '../CatalogFilters';
-import CatalogFilterPanelContent from '../CatalogFilterPanelContent';
+import CatalogFilterPanelContent from '../components/CatalogFilterPanelContent.vue';
 
 const store = factory();
 
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
similarity index 97%
rename from contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
rename to contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
index b66a9b2db5..5d0ee1cd89 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterPanelContent.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/CatalogFilterPanelContent.vue
@@ -107,9 +107,9 @@
 
   import { mapGetters } from 'vuex';
   import debounce from 'lodash/debounce';
-  import { RouteNames } from '../../constants';
-  import { catalogFilterMixin } from './mixins';
-  import LanguageFilter from './components/LanguageFilter';
+  import { RouteNames } from '../../../constants';
+  import { catalogFilterMixin } from '../mixins';
+  import LanguageFilter from './LanguageFilter.vue';
   import MultiSelect from 'shared/views/form/MultiSelect';
   import { constantsTranslationMixin } from 'shared/mixins';
   import Checkbox from 'shared/views/form/Checkbox';

From 5a9c0e0e48e56b7a99ef84153ea806c2040b8cba Mon Sep 17 00:00:00 2001
From: Prashant-thakur77 <prashant101007@gmail.com>
Date: Wed, 19 Nov 2025 23:36:50 +0530
Subject: [PATCH 24/24] Updated padding

---
 .../frontend/channelList/views/Channel/CatalogList.vue           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 406e4e0d32..6cfdadac44 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -13,7 +13,6 @@
     </VSlideYTransition>
     <VContainer
       fluid
-      class="pb-4 pl-4 pr-4"
       :style="`margin-top: ${offline ? 48 : 0}`"
     >
       <LoadingText v-if="loading" />