From 04ffcbb4e5581ef1965b4604a7d57b5b9b88a336 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 14 Jan 2025 14:48:32 -0500
Subject: [PATCH 01/16] Fix SearchFilterPanel showing a blank div

---
 .../components/SearchFiltersPanel/index.vue   | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index ba2eb32634f..b7098f3524b 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -109,35 +109,34 @@
             />
           </div>
         </div>
+      </div>
+      <div v-if="accordion && !currentCategory">
+        <!-- search by keyword -->
+        <h2 class="title">
+          {{ $tr('keywords') }}
+        </h2>
+        <SearchBox
+          key="channel-search"
+          ref="searchBox"
+          style="margin-bottom: 1em"
+          :placeholder="$tr('searchByKeyword')"
+          :value="value.keywords || ''"
+          @change="val => $emit('input', { ...value, keywords: val })"
+        />
 
-        <div v-if="accordion && !currentCategory">
-          <!-- search by keyword -->
-          <h2 class="title">
-            {{ $tr('keywords') }}
-          </h2>
-          <SearchBox
-            key="channel-search"
-            ref="searchBox"
-            style="margin-bottom: 1em"
-            :placeholder="$tr('searchByKeyword')"
-            :value="value.keywords || ''"
-            @change="val => $emit('input', { ...value, keywords: val })"
-          />
-
-          <ActivityButtonsGroup
-            v-if="showActivities"
-            class="section"
-            @input="handleActivity"
-          />
+        <ActivityButtonsGroup
+          v-if="showActivities"
+          class="section"
+          @input="handleActivity"
+        />
 
-          <AccordionSelectGroup
-            v-model="inputValue"
-            :showChannels="showChannels"
-            :activeCategories="activeCategories"
-            :handleCategory="handleCategory"
-            style="margin-top: 1em"
-          />
-        </div>
+        <AccordionSelectGroup
+          v-model="inputValue"
+          :showChannels="showChannels"
+          :activeCategories="activeCategories"
+          :handleCategory="handleCategory"
+          style="margin-top: 1em"
+        />
       </div>
     </div>
     <!-- When accordion mode is NOT activated, show as KModal, otherwise, just a div -->

From fc945b4d12e54239711bae88742c893e207fd3a8 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 14:50:20 -0500
Subject: [PATCH 02/16] Integrate Search Filters and Search Results to
 LessonResourceSelection

---
 kolibri/plugins/coach/assets/src/app.js       |   2 +
 .../src/composables/useResourceSelection.js   |  35 ++-
 .../coach/assets/src/constants/index.js       |   2 +
 .../coach/assets/src/routes/lessonsRoutes.js  |  21 +-
 .../ContentCardList.vue                       |   6 +
 .../LessonContentCard/index.vue               |  13 +-
 .../UpdatedResourceSelection.vue              |   5 +
 .../LessonResourceSelection/index.vue         |  38 +++-
 .../subPages/SearchFilters.vue                | 103 +++++++++
 .../subPages/SelectFromSearchResults.vue      | 204 ++++++++++++++++++
 ...omChannels.vue => SelectFromTopicTree.vue} |  11 +-
 .../subPages/SelectionIndex.vue               |   4 +
 .../kolibri-common/components/SearchBox.vue   |  20 ++
 .../kolibri-common/components/SearchChips.vue |   2 +-
 .../components/SearchFiltersPanel/index.vue   |  14 +-
 15 files changed, 461 insertions(+), 19 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
 create mode 100644 kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
 rename kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/{SelectFromChannels.vue => SelectFromTopicTree.vue} (93%)

diff --git a/kolibri/plugins/coach/assets/src/app.js b/kolibri/plugins/coach/assets/src/app.js
index 3b790935915..b9b908bb091 100644
--- a/kolibri/plugins/coach/assets/src/app.js
+++ b/kolibri/plugins/coach/assets/src/app.js
@@ -72,6 +72,8 @@ class CoachToolsModule extends KolibriApp {
         PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
         PageNames.LESSON_PREVIEW_RESOURCE,
         PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        PageNames.LESSON_SELECT_RESOURCES_SEARCH,
+        PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
         PageNames.LESSON_SELECT_RESOURCES_BOOKMARKS,
         PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
       ];
diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
index 86e35f9bd56..42d69baa267 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -2,6 +2,7 @@ import uniqBy from 'lodash/uniqBy';
 import { ref, computed, getCurrentInstance, watch } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
 import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
+import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
 import useFetch from './useFetch';
 
 /**
@@ -26,6 +27,10 @@ import useFetch from './useFetch';
  *   fetching bookmarks. Fetching more bookmarks is supported.
  * @property {FetchObject} treeFetch Topic tree fetch object to manage the process of
  *   fetching topic trees and their resources. Fetching more resources is supported.
+ * @property {FetchObject} searchFetch Search fetch object to manage the process of
+ *   fetching search results. Fetching more search results is supported.
+ * @property {Array<string>} searchTerms The search terms used to filter the search results.
+ * @property {boolean} displayingSearchResults Indicates whether we currently have search terms.
  * @property {Array<(node: Object) => boolean>} selectionRules An array of functions that determine
  *   whether a node can be selected.
  * @property {Array<Object>} selectedResources An array of currently selected resources.
@@ -35,6 +40,9 @@ import useFetch from './useFetch';
  *   from the `selectedResources` array.
  * @property {(resources: Array<Object>) => void} setSelectedResources Replaces the current
  *   `selectedResources` array with the provided resources array.
+ * @property {() => void} clearSearch Clears the current search terms and results.
+ * @property {(tag: Object) => void} removeSearchFilterTag Removes the specified tag from the
+ *  search terms.
  *
  * @returns {UseResourceSelectionResponse}
  */
@@ -67,6 +75,19 @@ export default function useResourceSelection() {
       }),
   });
 
+  const useSearchObject = useBaseSearch({
+    descendant: topic,
+  });
+  const searchFetch = {
+    data: useSearchObject.results,
+    loading: useSearchObject.searchLoading,
+    hasMore: computed(() => !!useSearchObject.more.value),
+    loadingMore: useSearchObject.moreLoading,
+    fetchData: useSearchObject.search,
+    fetchMore: useSearchObject.searchMore,
+  };
+  const { displayingSearchResults } = useSearchObject;
+
   const fetchTree = async (params = {}) => {
     topic.value = await ContentNodeResource.fetchTree(params);
     return topic.value.children;
@@ -80,11 +101,13 @@ export default function useResourceSelection() {
   watch(topicId, () => {
     if (topicId.value) {
       treeFetch.fetchData();
+    } else {
+      topic.value = null;
     }
   });
 
   const loading = computed(() => {
-    const sources = [bookmarksFetch, channelsFetch, treeFetch];
+    const sources = [bookmarksFetch, channelsFetch, treeFetch, searchFetch];
 
     return sources.some(sourceFetch => sourceFetch.loading.value);
   });
@@ -95,6 +118,9 @@ export default function useResourceSelection() {
     if (topicId.value) {
       treeFetch.fetchData();
     }
+    if (displayingSearchResults) {
+      searchFetch.fetchData();
+    }
   };
 
   fetchInitialData();
@@ -129,13 +155,18 @@ export default function useResourceSelection() {
   return {
     topic,
     loading,
+    treeFetch,
     channelsFetch,
     bookmarksFetch,
-    treeFetch,
+    searchFetch,
     selectionRules,
     selectedResources,
+    searchTerms: useSearchObject.searchTerms,
+    displayingSearchResults: useSearchObject.displayingSearchResults,
     selectResources,
     deselectResources,
     setSelectedResources,
+    clearSearch: useSearchObject.clearSearch,
+    removeSearchFilterTag: useSearchObject.removeFilterTag,
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index 03a55ab7d3e..0e8e256bd70 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -36,8 +36,10 @@ export const PageNames = {
   LESSON_EDIT_DETAILS_BETTER: 'LESSON_EDIT_DETAILS_BETTER',
   LESSON_SELECT_RESOURCES: 'LESSON_SELECT_RESOURCES',
   LESSON_SELECT_RESOURCES_INDEX: 'LESSON_SELECT_RESOURCES_INDEX',
+  LESSON_SELECT_RESOURCES_SEARCH: 'LESSON_SELECT_RESOURCES_SEARCH',
   LESSON_SELECT_RESOURCES_BOOKMARKS: 'LESSON_SELECT_RESOURCES_BOOKMARKS',
   LESSON_SELECT_RESOURCES_TOPIC_TREE: 'LESSON_SELECT_RESOURCES_TOPIC_TREE',
+  LESSON_SELECT_RESOURCES_SEARCH_RESULTS: 'LESSON_SELECT_RESOURCES_SEARCH_RESULTS',
   LESSON_PREVIEW_SELECTED_RESOURCES: 'LESSON_PREVIEW_SELECTED_RESOURCES',
   LESSON_PREVIEW_RESOURCE: 'LESSON_PREVIEW_RESOURCE',
   LESSON_LEARNER_REPORT: 'LESSON_LEARNER_REPORT',
diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
index debb48d68d6..4f81298cf42 100644
--- a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -38,12 +38,13 @@ import LessonLearnerExercisePage from '../views/lessons/reports/LessonLearnerExe
 import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.vue';
 import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
 import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
-import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
+import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue';
+import SearchFilters from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue';
 import SelectionIndex from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue';
 import SelectFromBookmarks from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue';
-import SelectFromChannels from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue';
+import SelectFromTopicTree from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue';
+import SelectFromSearchResults from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue';
 import ManageSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue';
-
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -153,8 +154,18 @@ export default [
           },
           {
             name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
-            path: 'channels',
-            component: SelectFromChannels,
+            path: 'topic-tree',
+            component: SelectFromTopicTree,
+          },
+          {
+            name: PageNames.LESSON_SELECT_RESOURCES_SEARCH,
+            path: 'search',
+            component: SearchFilters,
+          },
+          {
+            name: PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
+            path: 'search-results',
+            component: SelectFromSearchResults,
           },
           {
             name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
index 855362fe3b0..d2fead08834 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -48,6 +48,7 @@
             :content="content"
             :message="contentCardMessage(content)"
             :link="contentCardLink(content)"
+            :headingLevel="cardsHeadingLevel"
           >
             <template #notice>
               <slot
@@ -161,6 +162,11 @@
         type: Function, // ContentNode => Route
         required: true,
       },
+      // Heading level for the cards
+      cardsHeadingLevel: {
+        type: Number,
+        default: 3,
+      },
     },
 
     computed: {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
index 43136f111d4..3d44ebfce1f 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -13,7 +13,8 @@
         :class="{ 'title-message-wrapper': Boolean(!windowIsSmall) }"
         :style="{ color: $themeTokens.text }"
       >
-        <h3
+        <component
+          :is="headingElement"
           class="title"
           dir="auto"
         >
@@ -21,7 +22,7 @@
             :text="content.title"
             :maxLines="2"
           />
-        </h3>
+        </component>
       </div>
       <KTextTruncator
         v-if="!windowIsSmall"
@@ -101,11 +102,18 @@
         type: String,
         default: '',
       },
+      headingLevel: {
+        type: Number,
+        default: 3,
+      },
     },
     computed: {
       isTopic() {
         return !this.content.isLeaf;
       },
+      headingElement() {
+        return this.headingLevel ? `h${this.headingLevel}` : 'h3';
+      },
     },
   };
 
@@ -151,6 +159,7 @@
 
   .title {
     margin-bottom: 0.5em;
+    font-size: 1em;
   }
 
   .message {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
index 79619501c06..2dbe9db60f8 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
@@ -20,6 +20,7 @@
         :contentCheckboxDisabled="contentCheckboxDisabled"
         :contentCardLink="contentLink"
         :showRadioButtons="!multi"
+        :cardsHeadingLevel="cardsHeadingLevel"
         @changeselectall="handleSelectAll"
         @change_content_card="toggleSelected"
         @moreresults="fetchMore"
@@ -94,6 +95,10 @@
         type: Boolean,
         default: false,
       },
+      cardsHeadingLevel: {
+        type: Number,
+        default: 3,
+      },
     },
     computed: {
       channelsLink() {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index df1d8c5f135..19878a49675 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -17,7 +17,7 @@
         <h1 class="side-panel-title">{{ title }}</h1>
       </div>
     </template>
-    <div v-if="loading">
+    <div v-if="subpageLoading">
       <KCircularLoader />
     </div>
 
@@ -27,19 +27,27 @@
       :setGoBack="setGoBack"
       :topic="topic"
       :disabled="isSaving"
+      :treeFetch="treeFetch"
+      :searchFetch="searchFetch"
       :channelsFetch="channelsFetch"
       :bookmarksFetch="bookmarksFetch"
-      :treeFetch="treeFetch"
+      :searchTerms.sync="searchTerms"
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
       :unselectableResourceIds="unselectableResourceIds"
       :selectedResourcesSize="selectedResourcesSize"
+      :displayingSearchResults="displayingSearchResults"
+      @clearSearch="clearSearch"
       @selectResources="selectResources"
       @deselectResources="deselectResources"
       @setSelectedResources="setSelectedResources"
+      @removeSearchFilterTag="removeSearchFilterTag"
     />
 
-    <template #bottomNavigation>
+    <template
+      v-if="$route.name !== PageNames.LESSON_SELECT_RESOURCES_SEARCH"
+      #bottomNavigation
+    >
       <div class="bottom-nav-container">
         <KButtonGroup>
           <KRouterLink
@@ -81,7 +89,7 @@
 
   import uniqBy from 'lodash/uniqBy';
   import { mapState, mapActions, mapMutations } from 'vuex';
-
+  import { computed, getCurrentInstance } from 'vue';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import notificationStrings from 'kolibri/uiText/notificationStrings';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
@@ -97,17 +105,23 @@
       SidePanelModal,
     },
     setup() {
+      const instance = getCurrentInstance();
       const {
         loading,
         topic,
+        treeFetch,
+        searchFetch,
         channelsFetch,
         bookmarksFetch,
-        treeFetch,
+        searchTerms,
         selectionRules,
         selectedResources,
+        displayingSearchResults,
+        clearSearch,
         selectResources,
         deselectResources,
         setSelectedResources,
+        removeSearchFilterTag,
       } = useResourceSelection();
 
       const { createSnackbar } = useSnackbar();
@@ -123,19 +137,29 @@
 
       const { saveAndFinishAction$, continueAction$, cancelAction$ } = coreStrings;
 
+      const subpageLoading = computed(() => {
+        const skipLoading = PageNames.LESSON_SELECT_RESOURCES_SEARCH;
+        return loading.value && instance.proxy.$route.name !== skipLoading;
+      });
+
       return {
-        loading,
+        subpageLoading,
         selectedResources,
         topic,
+        treeFetch,
+        searchFetch,
         channelsFetch,
         bookmarksFetch,
-        treeFetch,
+        searchTerms,
         selectionRules,
+        displayingSearchResults,
+        clearSearch,
         selectResources,
         deselectResources,
         setSelectedResources,
         notifyResourcesAdded,
         notifySaveLessonError,
+        removeSearchFilterTag,
         cancelAction$,
         continueAction$,
         saveAndFinishAction$,
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
new file mode 100644
index 00000000000..c849b4965d0
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -0,0 +1,103 @@
+<template>
+
+  <SearchFiltersPanel
+    v-model="searchTermsComputed"
+    accordion
+    showChannels
+    showActivities
+    @close="showSearch = true"
+    @searchClick="onSearchClick"
+  />
+
+</template>
+
+
+<script>
+
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
+  import { getCurrentInstance, onMounted, ref } from 'vue';
+  import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import { PageNames } from '../../../../../../constants';
+
+  /**
+   * @typedef {import('../../../../../../composables/useFetch').FetchObject} FetchObject
+   */
+
+  export default {
+    name: 'SearchFilters',
+    components: {
+      SearchFiltersPanel,
+    },
+    setup(props) {
+      const prevRoute = ref(null);
+
+      const instance = getCurrentInstance();
+      onMounted(() => {
+        const { searchLabel$ } = coreStrings;
+        props.setTitle(searchLabel$());
+
+        const backRoute = prevRoute.value?.name
+          ? prevRoute.value
+          : {
+            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          };
+        props.setGoBack(() => {
+          instance.proxy.$router.push(backRoute);
+        });
+      });
+
+      return {
+        // eslint-disable-next-line vue/no-unused-properties
+        prevRoute,
+      };
+    },
+    props: {
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+      searchTerms: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      searchTermsComputed: {
+        get() {
+          return this.searchTerms;
+        },
+        set(value) {
+          this.$emit('update:searchTerms', value);
+        },
+      },
+    },
+
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        vm.prevRoute = from;
+      });
+    },
+    methods: {
+      onSearchClick() {
+        this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
+          query: this.$route.query,
+        });
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  /deep/ .search-box-row {
+    max-width: unset !important;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
new file mode 100644
index 00000000000..a489c855b5b
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
@@ -0,0 +1,204 @@
+<template>
+
+  <div v-if="displayingSearchResults">
+    <div class="channels-header">
+      <span class="side-panel-subtitle">
+        {{ selectFromChannels$() }}
+      </span>
+      <KButton
+        icon="filter"
+        :text="searchLabel$()"
+        @click="onSearchClick"
+      />
+    </div>
+
+    <div class="mb-16 side-panel-subtitle">
+      {{ resultsCountMessage }}
+    </div>
+
+    <SearchChips
+      class="mb-16"
+      :searchTerms="searchTerms"
+      @removeItem="onRemoveSearchFilterTag"
+      @clearSearch="onClearSearch"
+    />
+
+    <UpdatedResourceSelection
+      :contentList="contentList"
+      :hasMore="hasMore"
+      :cardsHeadingLevel="2"
+      :fetchMore="fetchMore"
+      :loadingMore="loadingMore"
+      :selectionRules="selectionRules"
+      :selectedResources="selectedResources"
+      @selectResources="$emit('selectResources', $event)"
+      @deselectResources="$emit('deselectResources', $event)"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { getCurrentInstance } from 'vue';
+
+  import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import SearchChips from 'kolibri-common/components/SearchChips';
+  import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
+  import { coachStrings } from '../../../../../common/commonCoachStrings';
+  import { PageNames } from '../../../../../../constants';
+
+  /**
+   * @typedef {import('../../../../../../composables/useFetch').FetchObject} FetchObject
+   */
+
+  export default {
+    name: 'SelectFromSearchResults',
+    components: {
+      SearchChips,
+      UpdatedResourceSelection,
+    },
+    setup(props) {
+      const instance = getCurrentInstance();
+      function redirectBack() {
+        const { topicId } = instance.proxy.$route.query;
+        if (topicId) {
+          instance.proxy.$router.push({
+            name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+            query: {
+              topicId,
+            },
+          });
+          return;
+        }
+        instance.proxy.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        });
+      }
+      if (!props.displayingSearchResults) {
+        redirectBack();
+      }
+
+      const { selectFromChannels$, searchLabel$ } = coreStrings;
+      const { manageLessonResourcesTitle$ } = coachStrings;
+
+      props.setTitle(manageLessonResourcesTitle$());
+      props.setGoBack(null);
+
+      const { data, hasMore, fetchMore, loadingMore } = props.searchFetch;
+      return {
+        contentList: data,
+        hasMore,
+        fetchMore,
+        loadingMore,
+        searchLabel$,
+        selectFromChannels$,
+        redirectBack,
+      };
+    },
+    props: {
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+      /**
+       * Fetch object for fetching search results.
+       * @type {FetchObject}
+       */
+      searchFetch: {
+        type: Object,
+        required: true,
+      },
+      selectionRules: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedResources: {
+        type: Array,
+        required: true,
+      },
+      searchTerms: {
+        type: Object,
+        required: true,
+      },
+      displayingSearchResults: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      resultsCountMessage() {
+        const count = this.contentList.length;
+        if (this.hasMore) {
+          return this.$tr('overresultsCount', { count });
+        }
+        return this.$tr('resultsCount', { count });
+      },
+    },
+    methods: {
+      onSearchClick() {
+        this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH,
+          query: this.$route.query,
+        });
+      },
+      onClearSearch() {
+        this.$emit('clearSearch');
+        this.redirectBack();
+      },
+      onRemoveSearchFilterTag(item, { isLast }) {
+        this.$emit('removeSearchFilterTag', item);
+        if (isLast) {
+          this.redirectBack();
+        }
+      },
+    },
+    $trs: {
+      resultsCount: {
+        message: '{count, number} {count, plural, one {result} other {results}}',
+        context: 'Number of search results when we have an exact count',
+      },
+      overresultsCount: {
+        message: 'Over {count, number} results',
+        context: 'Number of search results when we know there are more than the count',
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .side-panel-subtitle {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .channels-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .mr-8 {
+    margin-right: 8px;
+  }
+
+  .mb-16 {
+    margin-bottom: 16px;
+  }
+
+  // UpdatedResourceSelection has an ul that adds unnecessary margin
+  /deep/ ul {
+    margin-top: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
similarity index 93%
rename from kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue
rename to kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
index 65e9f78e117..3c139262279 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
@@ -8,6 +8,7 @@
       <KButton
         icon="filter"
         :text="searchLabel$()"
+        @click="onSearchClick"
       />
     </div>
 
@@ -58,7 +59,7 @@
    */
 
   export default {
-    name: 'SelectFromChannels',
+    name: 'SelectFromTopicTree',
     components: {
       UpdatedResourceSelection,
     },
@@ -136,6 +137,14 @@
       }
       return next();
     },
+    methods: {
+      onSearchClick() {
+        this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH,
+          query: this.$route.query,
+        });
+      },
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue
index 8e54c8c761f..838efe9da2e 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue
@@ -42,6 +42,7 @@
         <KButton
           icon="filter"
           :text="searchLabel$()"
+          @click="onSearchClick"
         />
       </div>
       <p
@@ -152,6 +153,9 @@
           query: { topicId: channel.id },
         };
       },
+      onSearchClick() {
+        this.$router.push({ name: PageNames.LESSON_SELECT_RESOURCES_SEARCH });
+      },
     },
   };
 
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index ed18e82ed61..a7f25a7c719 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -43,6 +43,7 @@
           :appearanceOverrides="{ minWidth: '36px', padding: 0 }"
           :aria-label="coreString('startSearchButtonLabel')"
           type="submit"
+          @click="onSearchClick"
         >
           <template #icon>
             <KIcon
@@ -61,6 +62,7 @@
 
 <script>
 
+  import debounce from 'lodash/debounce';
   import commonCoreStrings, { coreString } from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
@@ -93,6 +95,10 @@
         type: String,
         default: null,
       },
+      emitOnInputChange: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -112,6 +118,9 @@
         return this.value !== null ? this.value : this.$route.query.keywords;
       },
       searchBarDisabled() {
+        if (this.$listeners.searchClick) {
+          return false;
+        }
         // Disable the search bar if it has been cleared or has not been changed
         return this.searchInputValue === '';
       },
@@ -135,6 +144,11 @@
       value(current) {
         this.searchInputValue = current || '';
       },
+      searchInputValue() {
+        if (this.emitOnInputChange) {
+          this.debouncedUpdateSearchQuery();
+        }
+      },
     },
     created() {
       this.searchInputValue = this.value;
@@ -164,6 +178,12 @@
       updateSearchQuery() {
         this.$emit('change', this.searchInputValue);
       },
+      debouncedUpdateSearchQuery: debounce(function () {
+        this.updateSearchQuery();
+      }, 300),
+      onSearchClick() {
+        this.$emit('searchClick');
+      },
     },
     $trs: {
       find: 'Find',
diff --git a/packages/kolibri-common/components/SearchChips.vue b/packages/kolibri-common/components/SearchChips.vue
index f62523f9b9d..54d4ba7eb45 100644
--- a/packages/kolibri-common/components/SearchChips.vue
+++ b/packages/kolibri-common/components/SearchChips.vue
@@ -13,7 +13,7 @@
           icon="delete"
           size="mini"
           class="filter-chip-button"
-          @click="$emit('removeItem', item)"
+          @click="$emit('removeItem', item, { isLast: items.length === 1 })"
         />
       </span>
     </div>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index b7098f3524b..15224177c48 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -118,10 +118,12 @@
         <SearchBox
           key="channel-search"
           ref="searchBox"
+          emitOnInputChange
           style="margin-bottom: 1em"
           :placeholder="$tr('searchByKeyword')"
           :value="value.keywords || ''"
-          @change="val => $emit('input', { ...value, keywords: val })"
+          @change="onSearchChange"
+          @searchClick="onSearchClick"
         />
 
         <ActivityButtonsGroup
@@ -397,6 +399,16 @@
           this.$refs.searchBox.focusSearchBox();
         }
       },
+      onSearchChange(val) {
+        if (this.value.keywords === val) {
+          return;
+        }
+        this.$emit('input', { ...this.value, keywords: val });
+      },
+      async onSearchClick() {
+        await this.$nextTick();
+        this.$emit('searchClick');
+      },
     },
     $trs: {
       keywords: {

From 3e8d6a5ef9b8c2b839abf01be2e444c8e1ccac70 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 17:28:31 -0500
Subject: [PATCH 03/16] Support browsing search result topics

---
 .../ResourceSelectionBreadcrumbs.vue          | 22 +++---
 .../UpdatedResourceSelection.vue              | 28 +++++--
 .../subPages/SelectFromSearchResults.vue      | 42 +++++++++-
 .../subPages/SelectFromTopicTree.vue          | 76 +++++++++++++++++--
 4 files changed, 142 insertions(+), 26 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue
index f57cc555fd9..d53462c72ce 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue
@@ -28,16 +28,18 @@
     },
     computed: {
       selectionCrumbs() {
-        return [
-          // The "Channels" breadcrumb
-          { text: this.coreString('channelsLabel'), link: this.channelsLink },
-          // Ancestors breadcrumbs
-          // NOTE: The current topic is injected into `ancestors` in the showPage action
-          ...this.ancestors.map(a => ({
-            text: a.title,
-            link: this.topicsLink(a.id),
-          })),
-        ];
+        // NOTE: The current topic is injected into `ancestors` in the parent component
+        const breadcrumbs = this.ancestors.map(a => ({
+          text: a.title,
+          link: this.topicsLink(a.id),
+        }));
+        if (this.channelsLink) {
+          breadcrumbs.unshift({
+            text: this.coreString('channelsLabel'),
+            link: this.channelsLink,
+          });
+        }
+        return breadcrumbs;
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
index 2dbe9db60f8..08c64593ac1 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue
@@ -3,7 +3,7 @@
   <div class="select-resource">
     <div>
       <ResourceSelectionBreadcrumbs
-        v-if="topic"
+        v-if="topic && !hideBreadcrumbs"
         :ancestors="[...topic.ancestors, topic]"
         :channelsLink="channelsLink"
         :topicsLink="topicsLink"
@@ -37,7 +37,7 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
-  import { PageNames, ViewMoreButtonStates } from '../../../constants';
+  import { ViewMoreButtonStates } from '../../../constants';
 
   export default {
     name: 'UpdatedResourceSelection',
@@ -99,13 +99,22 @@
         type: Number,
         default: 3,
       },
+      channelsLink: {
+        type: Object,
+        required: false,
+        default: null,
+      },
+      getTopicLink: {
+        type: Function,
+        required: false,
+        default: () => {},
+      },
+      hideBreadcrumbs: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
-      channelsLink() {
-        return {
-          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
-        };
-      },
       selectAllIndeterminate() {
         return (
           !this.selectAllChecked &&
@@ -147,6 +156,11 @@
         return { name, params, query };
       },
       topicsLink(topicId) {
+        const route = this.getTopicLink?.(topicId);
+        if (route) {
+          return route;
+        }
+
         const { name, params, query } = this.$route;
         return {
           name,
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
index a489c855b5b..a0b7feff10e 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
@@ -31,6 +31,7 @@
       :loadingMore="loadingMore"
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
+      :getTopicLink="getTopicLink"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
     />
@@ -131,14 +132,27 @@
         type: Boolean,
         required: true,
       },
+      topic: {
+        type: Object,
+        required: false,
+        default: null,
+      },
     },
     computed: {
       resultsCountMessage() {
         const count = this.contentList.length;
-        if (this.hasMore) {
-          return this.$tr('overresultsCount', { count });
+        if (this.topic) {
+          const params = {
+            count,
+            folder: this.topic.title,
+          };
+          return this.hasMore
+            ? this.$tr('overResultsCountInFolder', params)
+            : this.$tr('resultsCountInFolder', params);
         }
-        return this.$tr('resultsCount', { count });
+        return this.hasMore
+          ? this.$tr('overResultsCount', { count })
+          : this.$tr('resultsCount', { count });
       },
     },
     methods: {
@@ -158,16 +172,36 @@
           this.redirectBack();
         }
       },
+      getTopicLink(topicId) {
+        return {
+          name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+          query: {
+            ...this.$route.query,
+            topicId,
+            searchResultTopicId: topicId,
+            searchTopicId: this.$route.query.topicId,
+          },
+        };
+      },
     },
     $trs: {
       resultsCount: {
         message: '{count, number} {count, plural, one {result} other {results}}',
         context: 'Number of search results when we have an exact count',
       },
-      overresultsCount: {
+      resultsCountInFolder: {
+        message: "{count, number} {count, plural, one {result} other {results}} in '{folder}'",
+        context: 'Number of search results when we have an exact count in a specific folder',
+      },
+      overResultsCount: {
         message: 'Over {count, number} results',
         context: 'Number of search results when we know there are more than the count',
       },
+      overResultsCountInFolder: {
+        message: "Over {count, number} results in '{folder}'",
+        context:
+          'Number of search results when we know there are more than the count in a specific folder',
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
index 3c139262279..37de6f7d26e 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
@@ -1,7 +1,10 @@
 <template>
 
   <div>
-    <div class="channels-header">
+    <div
+      v-if="!isTopicFromSearchResult"
+      class="channels-header"
+    >
       <span class="side-panel-subtitle">
         {{ selectFromChannels$() }}
       </span>
@@ -29,14 +32,16 @@
 
     <UpdatedResourceSelection
       canSelectAll
-      :topic="topic"
       :disabled="disabled"
+      :topic="computedTopic"
       :contentList="contentList"
       :hasMore="hasMore"
       :fetchMore="fetchMore"
       :loadingMore="loadingMore"
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
+      :channelsLink="breadcrumbChannelsLink"
+      :hideBreadcrumbs="computedTopic.ancestors.length === 0"
       :unselectableResourceIds="unselectableResourceIds"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
@@ -48,7 +53,7 @@
 
 <script>
 
-  import { getCurrentInstance } from 'vue';
+  import { computed, getCurrentInstance } from 'vue';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
   import { coachStrings } from '../../../../../common/commonCoachStrings';
@@ -67,20 +72,60 @@
       const { selectFromChannels$, searchLabel$ } = coreStrings;
       const { manageLessonResourcesTitle$ } = coachStrings;
       const instance = getCurrentInstance();
+      const routeQuery = instance.proxy.$route.query;
+      const isTopicFromSearchResult = computed(() => !!routeQuery.searchResultTopicId);
+
+      props.setTitle(
+        isTopicFromSearchResult.value
+          ? instance.proxy.$tr('backToSearchResultsLabel')
+          : manageLessonResourcesTitle$(),
+      );
 
-      props.setTitle(manageLessonResourcesTitle$());
       props.setGoBack(() => {
+        const { searchTopicId } = routeQuery;
+        if (!isTopicFromSearchResult.value || !routeQuery.searchTopicId) {
+          return instance.proxy.$router.push({
+            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          });
+        }
+        const query = { ...instance.proxy.$route.query };
+        query.topicId = searchTopicId;
+        delete query.searchTopicId;
+        delete query.searchResultTopicId;
+
         instance.proxy.$router.push({
-          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
+          query,
         });
       });
 
+      const computedTopic = computed(() => {
+        if (!isTopicFromSearchResult.value) {
+          return props.topic;
+        }
+        // Slice ancestors to show only ancestors from search result topic
+        const { searchResultTopicId } = routeQuery;
+        const topicAncestors = props.topic.ancestors;
+        const searchResultTopicIndex = topicAncestors.findIndex(
+          ({ id }) => id === searchResultTopicId,
+        );
+        const newAncestors =
+          searchResultTopicIndex === -1 ? [] : topicAncestors.slice(searchResultTopicIndex);
+
+        return {
+          ...props.topic,
+          ancestors: newAncestors,
+        };
+      });
+
       const { data, hasMore, fetchMore, loadingMore } = props.treeFetch;
       return {
         contentList: data,
         hasMore,
         fetchMore,
         loadingMore,
+        computedTopic,
+        isTopicFromSearchResult,
         searchLabel$,
         selectFromChannels$,
       };
@@ -125,6 +170,17 @@
         default: false,
       },
     },
+    computed: {
+      breadcrumbChannelsLink() {
+        if (this.isTopicFromSearchResult) {
+          // Dont show chanell breadcrumb if topic is from search result
+          return null;
+        }
+        return {
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        };
+      },
+    },
     beforeRouteEnter(to, _, next) {
       const { topicId } = to.query;
       if (!topicId) {
@@ -145,6 +201,12 @@
         });
       },
     },
+    $trs: {
+      backToSearchResultsLabel: {
+        message: 'Back to search results',
+        context: 'Button to go back to search results',
+      },
+    },
   };
 
 </script>
@@ -164,6 +226,10 @@
     margin-bottom: 16px;
   }
 
+  .topic-info h2 {
+    margin: 0;
+  }
+
   .mr-8 {
     margin-right: 8px;
   }

From ee35e76ce94a372121e493f3f118c5820867199c Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 17:29:13 -0500
Subject: [PATCH 04/16] Immersive side panel when browsing search result topics

---
 .../sidePanels/LessonResourceSelection/index.vue    |  7 +++++++
 .../components/SidePanelModal/index.vue             | 13 +++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index 19878a49675..43006a98ed3 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -4,6 +4,7 @@
     alignment="right"
     sidePanelWidth="700px"
     closeButtonIconType="close"
+    :immersive="isImmersivePage"
     @closePanel="closeSidePanel"
     @shouldFocusFirstEl="() => null"
   >
@@ -198,6 +199,12 @@
       unselectableResourceIds() {
         return this.workingResources.map(resource => resource.contentnode_id);
       },
+      isImmersivePage() {
+        return (
+          this.$route.name === PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE &&
+          this.$route.query.searchResultTopicId
+        );
+      },
     },
     methods: {
       ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 26b1029c8fe..dbf068bfeae 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -20,7 +20,7 @@
           <!-- Fixed header -->
           <div
             ref="fixedHeader"
-            class="side-panel-header"
+            :class="{ 'side-panel-header': true, immersive: immersive }"
             :style="headerStyles"
           >
             <div
@@ -120,6 +120,11 @@
         required: false,
         default: null,
       },
+      immersive: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     computed: {
       isMobile() {
@@ -149,7 +154,7 @@
       /** Styling Properties */
       headerStyles() {
         return {
-          backgroundColor: this.$themeTokens.surface,
+          backgroundColor: this.immersive ? this.$themeTokens.appBar : this.$themeTokens.surface,
           borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
         };
       },
@@ -236,6 +241,10 @@
       width: 100%;
       min-height: 60px;
       padding: 0 1em;
+
+      &.immersive {
+        @extend %dropshadow-2dp;
+      }
     }
 
     .side-panel-content {

From 74857ee1dab85474ade261bfc092481ca961ec3a Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 15 Jan 2025 17:41:53 -0500
Subject: [PATCH 05/16] Improve styles in search filters subpage

---
 .../subPages/SearchFilters.vue                | 46 +++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index c849b4965d0..1e5951825dd 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -1,13 +1,21 @@
 <template>
 
-  <SearchFiltersPanel
-    v-model="searchTermsComputed"
-    accordion
-    showChannels
-    showActivities
-    @close="showSearch = true"
-    @searchClick="onSearchClick"
-  />
+  <div>
+    <div
+      v-if="topic"
+      class="side-panel-subtitle"
+    >
+      {{ $tr('searchInTitle', { folder: topic.title }) }}
+    </div>
+    <SearchFiltersPanel
+      v-model="searchTermsComputed"
+      accordion
+      showChannels
+      showActivities
+      @close="showSearch = true"
+      @searchClick="onSearchClick"
+    />
+  </div>
 
 </template>
 
@@ -64,6 +72,11 @@
         type: Object,
         required: true,
       },
+      topic: {
+        type: Object,
+        required: false,
+        default: null,
+      },
     },
     computed: {
       searchTermsComputed: {
@@ -89,6 +102,12 @@
         });
       },
     },
+    $trs: {
+      searchInTitle: {
+        message: "Search in '{folder}'",
+        context: 'Title for search resources in folder',
+      },
+    },
   };
 
 </script>
@@ -96,8 +115,19 @@
 
 <style lang="scss" scoped>
 
+  .side-panel-subtitle {
+    margin-bottom: 24px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
   /deep/ .search-box-row {
     max-width: unset !important;
   }
 
+  /deep/ h2 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
 </style>

From e960ff22243a24291222ae9ffe09d19adf1a5969 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 16 Jan 2025 08:38:58 -0500
Subject: [PATCH 06/16] Fixes

---
 .../coach/assets/src/composables/useResourceSelection.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
index 42d69baa267..2e992457514 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -118,7 +118,7 @@ export default function useResourceSelection() {
     if (topicId.value) {
       treeFetch.fetchData();
     }
-    if (displayingSearchResults) {
+    if (displayingSearchResults.value) {
       searchFetch.fetchData();
     }
   };

From 67346710681ca4c7b3c39434ad129c85833293c3 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 16 Jan 2025 09:31:30 -0500
Subject: [PATCH 07/16] Refactor and add comments on some methods

---
 .../sidePanels/LessonResourceSelection/index.vue           | 2 ++
 .../LessonResourceSelection/subPages/SearchFilters.vue     | 4 ++--
 .../subPages/SelectFromTopicTree.vue                       | 4 +++-
 packages/kolibri-common/components/SearchBox.vue           | 2 ++
 .../kolibri-common/components/SearchFiltersPanel/index.vue | 7 +++----
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index 43006a98ed3..aadbbef3650 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -201,6 +201,8 @@
       },
       isImmersivePage() {
         return (
+          // When we are searching in the topic tree a topic that was
+          // found in the search results, show the side panel in immersive mode
           this.$route.name === PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE &&
           this.$route.query.searchResultTopicId
         );
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index 1e5951825dd..5dcef036ac7 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -22,9 +22,10 @@
 
 <script>
 
-  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
   import { getCurrentInstance, onMounted, ref } from 'vue';
+
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
   import { PageNames } from '../../../../../../constants';
 
   /**
@@ -88,7 +89,6 @@
         },
       },
     },
-
     beforeRouteEnter(to, from, next) {
       next(vm => {
         vm.prevRoute = from;
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
index 37de6f7d26e..d3aba56d37f 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
@@ -103,7 +103,9 @@
         if (!isTopicFromSearchResult.value) {
           return props.topic;
         }
-        // Slice ancestors to show only ancestors from search result topic
+        // When we are showing the topic tree of a folder that was found in search results,
+        // we want to show just the ancestors starting from the search result topic. So lets
+        // slice the ancestors array to start from the search result topic.
         const { searchResultTopicId } = routeQuery;
         const topicAncestors = props.topic.ancestors;
         const searchResultTopicIndex = topicAncestors.findIndex(
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index a7f25a7c719..9c97554e844 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -119,6 +119,8 @@
       },
       searchBarDisabled() {
         if (this.$listeners.searchClick) {
+          // If the parent component is listening for the searchClick event, then we dont disable
+          // the search button to allow clicking on search even if the search input is empty
           return false;
         }
         // Disable the search bar if it has been cleared or has not been changed
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 15224177c48..ea3b88d20f2 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -122,7 +122,7 @@
           style="margin-bottom: 1em"
           :placeholder="$tr('searchByKeyword')"
           :value="value.keywords || ''"
-          @change="onSearchChange"
+          @change="onSearchKeywordsChange"
           @searchClick="onSearchClick"
         />
 
@@ -399,14 +399,13 @@
           this.$refs.searchBox.focusSearchBox();
         }
       },
-      onSearchChange(val) {
+      onSearchKeywordsChange(val) {
         if (this.value.keywords === val) {
           return;
         }
         this.$emit('input', { ...this.value, keywords: val });
       },
-      async onSearchClick() {
-        await this.$nextTick();
+      onSearchClick() {
         this.$emit('searchClick');
       },
     },

From aed4dcc8e10b9100f8d5156c4c539db560c61056 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 16 Jan 2025 10:04:09 -0500
Subject: [PATCH 08/16] Move strings to searchAndFilterStrings and fix styles

---
 .../src/composables/useResourceSelection.js   |  5 ++-
 .../LessonResourceSelection/index.vue         |  2 +-
 .../subPages/SearchFilters.vue                | 12 +++---
 .../subPages/SelectFromSearchResults.vue      | 37 ++++++-------------
 .../subPages/SelectFromTopicTree.vue          | 17 ++++-----
 .../components/SidePanelModal/index.vue       |  1 +
 .../strings/searchAndFilterStrings.js         | 25 +++++++++++++
 7 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
index 2e992457514..2eae8c0d40c 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -89,7 +89,10 @@ export default function useResourceSelection() {
   const { displayingSearchResults } = useSearchObject;
 
   const fetchTree = async (params = {}) => {
-    topic.value = await ContentNodeResource.fetchTree(params);
+    const newTopic = await ContentNodeResource.fetchTree(params);
+    if (topic.value?.id !== newTopic.id) {
+      topic.value = newTopic;
+    }
     return topic.value.children;
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index aadbbef3650..a293be936c2 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -204,7 +204,7 @@
           // When we are searching in the topic tree a topic that was
           // found in the search results, show the side panel in immersive mode
           this.$route.name === PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE &&
-          this.$route.query.searchResultTopicId
+          !!this.$route.query.searchResultTopicId
         );
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index 5dcef036ac7..9d5f2d91063 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -5,7 +5,7 @@
       v-if="topic"
       class="side-panel-subtitle"
     >
-      {{ $tr('searchInTitle', { folder: topic.title }) }}
+      {{ searchInFolder$({ folder: topic.title }) }}
     </div>
     <SearchFiltersPanel
       v-model="searchTermsComputed"
@@ -26,6 +26,7 @@
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { PageNames } from '../../../../../../constants';
 
   /**
@@ -55,9 +56,12 @@
         });
       });
 
+      const { searchInFolder$ } = searchAndFilterStrings;
+
       return {
         // eslint-disable-next-line vue/no-unused-properties
         prevRoute,
+        searchInFolder$,
       };
     },
     props: {
@@ -102,12 +106,6 @@
         });
       },
     },
-    $trs: {
-      searchInTitle: {
-        message: "Search in '{folder}'",
-        context: 'Title for search resources in folder',
-      },
-    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
index a0b7feff10e..3493a6d17be 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromSearchResults.vue
@@ -46,9 +46,10 @@
 
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import SearchChips from 'kolibri-common/components/SearchChips';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
-  import { coachStrings } from '../../../../../common/commonCoachStrings';
   import { PageNames } from '../../../../../../constants';
+  import { coachStrings } from '../../../../../common/commonCoachStrings';
 
   /**
    * @typedef {import('../../../../../../composables/useFetch').FetchObject} FetchObject
@@ -140,19 +141,22 @@
     },
     computed: {
       resultsCountMessage() {
+        const {
+          resultsCount$,
+          overResultsCount$,
+          resultsCountInFolder$,
+          overResultsCountInFolder$,
+        } = searchAndFilterStrings;
+
         const count = this.contentList.length;
         if (this.topic) {
           const params = {
             count,
             folder: this.topic.title,
           };
-          return this.hasMore
-            ? this.$tr('overResultsCountInFolder', params)
-            : this.$tr('resultsCountInFolder', params);
+          return this.hasMore ? overResultsCountInFolder$(params) : resultsCountInFolder$(params);
         }
-        return this.hasMore
-          ? this.$tr('overResultsCount', { count })
-          : this.$tr('resultsCount', { count });
+        return this.hasMore ? overResultsCount$({ count }) : resultsCount$({ count });
       },
     },
     methods: {
@@ -184,25 +188,6 @@
         };
       },
     },
-    $trs: {
-      resultsCount: {
-        message: '{count, number} {count, plural, one {result} other {results}}',
-        context: 'Number of search results when we have an exact count',
-      },
-      resultsCountInFolder: {
-        message: "{count, number} {count, plural, one {result} other {results}} in '{folder}'",
-        context: 'Number of search results when we have an exact count in a specific folder',
-      },
-      overResultsCount: {
-        message: 'Over {count, number} results',
-        context: 'Number of search results when we know there are more than the count',
-      },
-      overResultsCountInFolder: {
-        message: "Over {count, number} results in '{folder}'",
-        context:
-          'Number of search results when we know there are more than the count in a specific folder',
-      },
-    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
index d3aba56d37f..33c82ec9ec5 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
@@ -41,7 +41,7 @@
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
       :channelsLink="breadcrumbChannelsLink"
-      :hideBreadcrumbs="computedTopic.ancestors.length === 0"
+      :hideBreadcrumbs="hideBreadcrumbs"
       :unselectableResourceIds="unselectableResourceIds"
       @selectResources="$emit('selectResources', $event)"
       @deselectResources="$emit('deselectResources', $event)"
@@ -55,6 +55,7 @@
 
   import { computed, getCurrentInstance } from 'vue';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
   import { coachStrings } from '../../../../../common/commonCoachStrings';
   import { PageNames } from '../../../../../../constants';
@@ -71,14 +72,13 @@
     setup(props) {
       const { selectFromChannels$, searchLabel$ } = coreStrings;
       const { manageLessonResourcesTitle$ } = coachStrings;
+      const { backToSearchResultsLabel$ } = searchAndFilterStrings;
       const instance = getCurrentInstance();
       const routeQuery = instance.proxy.$route.query;
       const isTopicFromSearchResult = computed(() => !!routeQuery.searchResultTopicId);
 
       props.setTitle(
-        isTopicFromSearchResult.value
-          ? instance.proxy.$tr('backToSearchResultsLabel')
-          : manageLessonResourcesTitle$(),
+        isTopicFromSearchResult.value ? backToSearchResultsLabel$() : manageLessonResourcesTitle$(),
       );
 
       props.setGoBack(() => {
@@ -182,6 +182,9 @@
           name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
         };
       },
+      hideBreadcrumbs() {
+        return this.isTopicFromSearchResult && this.computedTopic.ancestors.length === 0;
+      },
     },
     beforeRouteEnter(to, _, next) {
       const { topicId } = to.query;
@@ -203,12 +206,6 @@
         });
       },
     },
-    $trs: {
-      backToSearchResultsLabel: {
-        message: 'Back to search results',
-        context: 'Button to go back to search results',
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index dbf068bfeae..dc6a991c665 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -238,6 +238,7 @@
     height: 100vh;
 
     .side-panel-header {
+      z-index: 1;
       width: 100%;
       min-height: 60px;
       padding: 0 1em;
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 8ce4d90a9a1..d6968e823b9 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -56,4 +56,29 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'No resources selected',
     context: 'Message displayed when no resources are selected',
   },
+  searchInFolder: {
+    message: "Search in '{folder}'",
+    context: 'Title for search resources in folder',
+  },
+  resultsCount: {
+    message: '{count, number} {count, plural, one {result} other {results}}',
+    context: 'Number of search results when we have an exact count',
+  },
+  resultsCountInFolder: {
+    message: "{count, number} {count, plural, one {result} other {results}} in '{folder}'",
+    context: 'Number of search results when we have an exact count in a specific folder',
+  },
+  overResultsCount: {
+    message: 'Over {count, number} results',
+    context: 'Number of search results when we know there are more than the count',
+  },
+  overResultsCountInFolder: {
+    message: "Over {count, number} results in '{folder}'",
+    context:
+      'Number of search results when we know there are more than the count in a specific folder',
+  },
+  backToSearchResultsLabel: {
+    message: 'Back to search results',
+    context: 'Button to go back to search results',
+  },
 });

From 32a75be4add48ba7d383ad1360a61c094217f29a Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Thu, 16 Jan 2025 11:22:14 -0500
Subject: [PATCH 09/16] Optimize search requests

---
 .../src/composables/useResourceSelection.js   | 26 ++++++++++++++++++-
 .../subPages/SearchFilters.vue                | 11 ++++++++
 .../composables/useBaseSearch.js              | 10 +++++--
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
index 2eae8c0d40c..48b7edd1b42 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -75,17 +75,41 @@ export default function useResourceSelection() {
       }),
   });
 
+  const waitForTopicLoad = () => {
+    const { searchTopicId } = route.value.query;
+    const topicToWaitFor = searchTopicId || topicId.value;
+    if (!topicToWaitFor || topicToWaitFor === topic.value?.id) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      const unwatch = watch(topic, () => {
+        if (topic.value?.id === topicToWaitFor) {
+          unwatch();
+          resolve();
+        }
+      });
+    });
+  };
+
   const useSearchObject = useBaseSearch({
     descendant: topic,
+    // As we dont always show the search filters, we dont need to reload the search results
+    // each time the topic changes if not needed
+    reloadOnDescendantChange: false,
   });
   const searchFetch = {
     data: useSearchObject.results,
     loading: useSearchObject.searchLoading,
     hasMore: computed(() => !!useSearchObject.more.value),
     loadingMore: useSearchObject.moreLoading,
-    fetchData: useSearchObject.search,
+    fetchData: async () => {
+      // Make sure that the topic is loaded before searching
+      await waitForTopicLoad();
+      return useSearchObject.search();
+    },
     fetchMore: useSearchObject.searchMore,
   };
+
   const { displayingSearchResults } = useSearchObject;
 
   const fetchTree = async (params = {}) => {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index 9d5f2d91063..3b7d56adcc0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -56,6 +56,9 @@
         });
       });
 
+      // Fetch first available labels of the selected topic
+      props.searchFetch.fetchData();
+
       const { searchInFolder$ } = searchAndFilterStrings;
 
       return {
@@ -77,6 +80,14 @@
         type: Object,
         required: true,
       },
+      /**
+       * Fetch object for fetching search results.
+       * @type {FetchObject}
+       */
+      searchFetch: {
+        type: Object,
+        required: true,
+      },
       topic: {
         type: Object,
         required: false,
diff --git a/packages/kolibri-common/composables/useBaseSearch.js b/packages/kolibri-common/composables/useBaseSearch.js
index dcee9eb8a25..98870107d06 100644
--- a/packages/kolibri-common/composables/useBaseSearch.js
+++ b/packages/kolibri-common/composables/useBaseSearch.js
@@ -1,5 +1,6 @@
 import { get, set } from '@vueuse/core';
 import invert from 'lodash/invert';
+import isEqual from 'lodash/isEqual';
 import logger from 'kolibri-logging';
 import { computed, getCurrentInstance, inject, provide, ref, watch } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
@@ -157,6 +158,7 @@ export default function useBaseSearch({
   store,
   router,
   baseurl,
+  reloadOnDescendantChange = true,
   fetchContentNodeProgress,
 }) {
   // Get store and router references from the curent instance
@@ -325,9 +327,13 @@ export default function useBaseSearch({
     set(searchTerms, {});
   }
 
-  watch(searchTerms, search);
+  watch(searchTerms, (newValue, oldValue) => {
+    if (!isEqual(newValue, oldValue)) {
+      search();
+    }
+  });
 
-  if (descendant) {
+  if (descendant && reloadOnDescendantChange) {
     watch(descendant, newValue => {
       if (newValue) {
         search();

From 41353fff5b7e4e00c606798136d096a58c5fdb04 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 20 Jan 2025 15:31:19 -0500
Subject: [PATCH 10/16] Allow single select mode in acordions and open by
 default item

---
 .../AccordionSelectGroup.vue                  | 45 +++++++++----------
 .../accordion/AccordionContainer.vue          | 13 +++++-
 .../components/accordion/AccordionItem.vue    |  7 +++
 .../components/accordion/useAccordion.js      | 14 +++++-
 4 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
index aaa22652d4f..44362af10a1 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
@@ -2,14 +2,18 @@
 
   <div>
     <AccordionContainer
-      v-if="Object.keys(availableLibraryCategories).length"
-      class="accordion-select"
+      :multiple="false"
+      style="border: 0"
     >
       <AccordionItem
+        v-if="Object.keys(availableLibraryCategories).length"
+        isOpenByDefault
+        class="accordion-select"
         :title="$tr('categoryLabel')"
         :headerAppearanceOverrides="
           accordionHeaderStyles(activeCategories.some(cat => isCategoryActive(cat)))
         "
+        :style="accordionItemStyles"
       >
         <template #content>
           <KButton
@@ -58,13 +62,9 @@
           />
         </template>
       </AccordionItem>
-    </AccordionContainer>
-
-    <AccordionContainer
-      v-if="languageOptionsList.length"
-      class="accordion-select"
-    >
       <AccordionItem
+        v-if="languageOptionsList.length"
+        class="accordion-select"
         :title="coreString('languageLabel')"
         :headerAppearanceOverrides="
           accordionHeaderStyles(anySelectedFor('languages', languageOptionsList))
@@ -74,6 +74,7 @@
           maxHeight: '256px',
           overflowY: 'scroll',
         }"
+        :style="accordionItemStyles"
       >
         <template #content>
           <KCheckbox
@@ -86,13 +87,9 @@
           />
         </template>
       </AccordionItem>
-    </AccordionContainer>
-
-    <AccordionContainer
-      v-if="contentLevelOptions.length"
-      class="accordion-select"
-    >
       <AccordionItem
+        v-if="contentLevelOptions.length"
+        class="accordion-select"
         :title="coreString('levelLabel')"
         :disabled="contentLevelOptions.every(opt => opt.disabled)"
         :headerAppearanceOverrides="
@@ -102,6 +99,7 @@
           maxHeight: '256px',
           overflowY: 'scroll',
         }"
+        :style="accordionItemStyles"
       >
         <template #content>
           <KCheckbox
@@ -114,13 +112,9 @@
           />
         </template>
       </AccordionItem>
-    </AccordionContainer>
-
-    <AccordionContainer
-      v-if="accessibilityOptionsList.length"
-      class="accordion-select"
-    >
       <AccordionItem
+        v-if="accessibilityOptionsList.length"
+        class="accordion-select"
         :title="coreString('accessibility')"
         :headerAppearanceOverrides="
           accordionHeaderStyles(anySelectedFor('accessibility_labels', accessibilityOptionsList))
@@ -130,6 +124,7 @@
           maxHeight: '256px',
           overflowY: 'scroll',
         }"
+        :style="accordionItemStyles"
       >
         <template #content>
           <KCheckbox
@@ -142,10 +137,8 @@
           />
         </template>
       </AccordionItem>
-    </AccordionContainer>
-
-    <AccordionContainer class="accordion-select">
       <AccordionItem
+        class="accordion-select"
         :title="coreString('showResources')"
         :headerAppearanceOverrides="
           accordionHeaderStyles(anySelectedFor('learner_needs', needsOptionsList))
@@ -155,6 +148,7 @@
           maxHeight: '256px',
           overflowY: 'scroll',
         }"
+        :style="accordionItemStyles"
       >
         <template #content>
           <KCheckbox
@@ -290,6 +284,11 @@
           };
         });
       },
+      accordionItemStyles() {
+        return {
+          border: `1px solid ${this.$themeTokens.fineLine}`,
+        };
+      },
     },
     methods: {
       noCategories() {
diff --git a/packages/kolibri-common/components/accordion/AccordionContainer.vue b/packages/kolibri-common/components/accordion/AccordionContainer.vue
index c1e7af43125..84f039a15da 100644
--- a/packages/kolibri-common/components/accordion/AccordionContainer.vue
+++ b/packages/kolibri-common/components/accordion/AccordionContainer.vue
@@ -36,8 +36,10 @@
 
   export default {
     name: 'AccordionContainer',
-    setup(prop, { slots }) {
-      const { canExpandAll, canCollapseAll, collapseAll, expandAll } = useAccordion();
+    setup(props, { slots }) {
+      const { canExpandAll, canCollapseAll, collapseAll, expandAll } = useAccordion({
+        multiple: props.multiple,
+      });
 
       const hasHeaderSlot = computed(() => !!slots.header);
 
@@ -54,6 +56,13 @@
         type: [Object, String],
         default: null,
       },
+      /**
+       * Whether the accordion can have multiple items expanded at once.
+       */
+      multiple: {
+        type: Boolean,
+        default: true,
+      },
     },
   };
 
diff --git a/packages/kolibri-common/components/accordion/AccordionItem.vue b/packages/kolibri-common/components/accordion/AccordionItem.vue
index e5149d0d77f..b4579609ae5 100644
--- a/packages/kolibri-common/components/accordion/AccordionItem.vue
+++ b/packages/kolibri-common/components/accordion/AccordionItem.vue
@@ -90,6 +90,10 @@
         type: Boolean,
         default: false,
       },
+      isOpenByDefault: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       contentId() {
@@ -98,6 +102,9 @@
     },
     mounted() {
       this.registerItem();
+      if (this.isOpenByDefault) {
+        this.toggle();
+      }
     },
     componentWillUnmount() {
       this.unregisterItem();
diff --git a/packages/kolibri-common/components/accordion/useAccordion.js b/packages/kolibri-common/components/accordion/useAccordion.js
index 772ccd84923..da3c9217097 100644
--- a/packages/kolibri-common/components/accordion/useAccordion.js
+++ b/packages/kolibri-common/components/accordion/useAccordion.js
@@ -1,7 +1,7 @@
 import uniq from 'lodash/uniq';
 import { ref, computed, provide, inject } from 'vue';
 
-export default function useAccordion() {
+export default function useAccordion({ multiple } = {}) {
   const _items = ref([]);
   const _expandedItems = ref([]);
 
@@ -23,7 +23,11 @@ export default function useAccordion() {
   }
 
   function expand(uid) {
-    _expandedItems.value = uniq([..._expandedItems.value, uid]);
+    if (multiple) {
+      _expandedItems.value = uniq([..._expandedItems.value, uid]);
+    } else {
+      _expandedItems.value = [uid];
+    }
   }
 
   function collapse(uid) {
@@ -35,6 +39,9 @@ export default function useAccordion() {
   }
 
   function expandAll() {
+    if (!multiple) {
+      throw new Error('Cannot expand all items in non-multiple mode');
+    }
     _expandedItems.value = [..._items.value];
   }
 
@@ -43,6 +50,9 @@ export default function useAccordion() {
   }
 
   const canExpandAll = computed(() => {
+    if (!multiple) {
+      return false;
+    }
     return _items.value.length !== _expandedItems.value.length;
   });
 

From 8d5f8bb8193d5a2193a63b6bd5aa9fc47f41e1f0 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 20 Jan 2025 16:27:08 -0500
Subject: [PATCH 11/16] Add title and go back method when selecting a category

---
 .../subPages/SearchFilters.vue                | 32 +++++++++++++++----
 .../components/SearchFiltersPanel/index.vue   | 12 +++++++
 .../strings/searchAndFilterStrings.js         |  4 +++
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index 3b7d56adcc0..d2aed7c47c0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -8,12 +8,14 @@
       {{ searchInFolder$({ folder: topic.title }) }}
     </div>
     <SearchFiltersPanel
+      ref="searchFiltersPanel"
       v-model="searchTermsComputed"
       accordion
       showChannels
       showActivities
       @close="showSearch = true"
       @searchClick="onSearchClick"
+      @categorySearchOpen="handleCategorySearchOpen"
     />
   </div>
 
@@ -42,20 +44,35 @@
       const prevRoute = ref(null);
 
       const instance = getCurrentInstance();
-      onMounted(() => {
-        const { searchLabel$ } = coreStrings;
-        props.setTitle(searchLabel$());
-
+      const goBack = () => {
         const backRoute = prevRoute.value?.name
           ? prevRoute.value
           : {
             name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
           };
-        props.setGoBack(() => {
-          instance.proxy.$router.push(backRoute);
-        });
+        instance.proxy.$router.push(backRoute);
+      };
+      const { searchLabel$ } = coreStrings;
+      const { chooseACategory$ } = searchAndFilterStrings;
+      const title = searchLabel$();
+      onMounted(() => {
+        props.setTitle(title);
+        props.setGoBack(goBack);
       });
 
+      function handleCategorySearchOpen(isOpen) {
+        if (isOpen) {
+          props.setTitle(chooseACategory$());
+          props.setGoBack(() => {
+            const searchFiltersPanelRef = instance.proxy.$refs.searchFiltersPanel;
+            searchFiltersPanelRef.closeCategorySearch();
+          });
+        } else {
+          props.setTitle(title);
+          props.setGoBack(goBack);
+        }
+      }
+
       // Fetch first available labels of the selected topic
       props.searchFetch.fetchData();
 
@@ -65,6 +82,7 @@
         // eslint-disable-next-line vue/no-unused-properties
         prevRoute,
         searchInFolder$,
+        handleCategorySearchOpen,
       };
     },
     props: {
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index ea3b88d20f2..874d5123150 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -315,6 +315,12 @@
         return Object.keys((this.activeSearchTerms && this.activeSearchTerms.categories) || {});
       },
     },
+    watch: {
+      currentCategory(val) {
+        const isCategorySearchOpen = val != null;
+        this.$emit('categorySearchOpen', isCategorySearchOpen);
+      },
+    },
     methods: {
       isCategoryActive(categoryValue) {
         // Takes the dot separated category value and checks if it is active
@@ -408,6 +414,12 @@
       onSearchClick() {
         this.$emit('searchClick');
       },
+      /**
+       * @public
+       */
+      closeCategorySearch() {
+        this.currentCategory = null;
+      },
     },
     $trs: {
       keywords: {
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index d6968e823b9..6a3e3c89e1d 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -81,4 +81,8 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'Back to search results',
     context: 'Button to go back to search results',
   },
+  chooseACategory: {
+    message: 'Choose a category',
+    context: 'Label for a selector component to choose a category',
+  },
 });

From 569daceaa04f8b81d44b66ee9351da4389983d07 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 21 Jan 2025 09:38:58 -0500
Subject: [PATCH 12/16] Align Search Filter Panel styles with figma

---
 .../LessonResourceSelection/index.vue         |  1 +
 .../subPages/SearchFilters.vue                | 29 +++++++------------
 .../components/SearchFiltersPanel/index.vue   |  6 +++-
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index a293be936c2..ad206c3ff95 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -285,6 +285,7 @@
 <style scoped>
 
   .side-panel-title {
+    margin: 0;
     margin-top: 20px;
     font-size: 18px;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index d2aed7c47c0..698bda89582 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -1,23 +1,16 @@
 <template>
 
-  <div>
-    <div
-      v-if="topic"
-      class="side-panel-subtitle"
-    >
-      {{ searchInFolder$({ folder: topic.title }) }}
-    </div>
-    <SearchFiltersPanel
-      ref="searchFiltersPanel"
-      v-model="searchTermsComputed"
-      accordion
-      showChannels
-      showActivities
-      @close="showSearch = true"
-      @searchClick="onSearchClick"
-      @categorySearchOpen="handleCategorySearchOpen"
-    />
-  </div>
+  <SearchFiltersPanel
+    ref="searchFiltersPanel"
+    v-model="searchTermsComputed"
+    accordion
+    showChannels
+    showActivities
+    :title="topic && searchInFolder$({ folder: topic.title })"
+    @close="showSearch = true"
+    @searchClick="onSearchClick"
+    @categorySearchOpen="handleCategorySearchOpen"
+  />
 
 </template>
 
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 874d5123150..33ab69c7d57 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -113,7 +113,7 @@
       <div v-if="accordion && !currentCategory">
         <!-- search by keyword -->
         <h2 class="title">
-          {{ $tr('keywords') }}
+          {{ title || $tr('keywords') }}
         </h2>
         <SearchBox
           key="channel-search"
@@ -253,6 +253,10 @@
         type: Boolean,
         default: true,
       },
+      title: {
+        type: String,
+        default: null,
+      },
     },
     computed: {
       closeButtonIcon() {

From edf6801ab8d92cbe6be9a976cf07d84b1e0b070f Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 24 Jan 2025 09:08:40 -0500
Subject: [PATCH 13/16] Fix styles

---
 .../LessonContentCard/index.vue                       | 11 ++++++++++-
 .../sidePanels/LessonResourceSelection/index.vue      |  1 -
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
index 3d44ebfce1f..2e87cfd9b59 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -105,6 +105,15 @@
       headingLevel: {
         type: Number,
         default: 3,
+        validator(value) {
+          if (value <= 6 && value >= 2) {
+            return true;
+          } else {
+            // eslint-disable-next-line no-console
+            console.error(`'headingLevel' must be between 2 and 6.`);
+            return false;
+          }
+        },
       },
     },
     computed: {
@@ -112,7 +121,7 @@
         return !this.content.isLeaf;
       },
       headingElement() {
-        return this.headingLevel ? `h${this.headingLevel}` : 'h3';
+        return `h${this.headingLevel}`;
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index ad206c3ff95..8b04034769a 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -286,7 +286,6 @@
 
   .side-panel-title {
     margin: 0;
-    margin-top: 20px;
     font-size: 18px;
   }
 

From 65bc6545758a74b6c8bcc4c4f20120607d7115e1 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 24 Jan 2025 11:29:45 -0500
Subject: [PATCH 14/16] Redirect to search results on filter change

---
 .../src/composables/useResourceSelection.js   |  8 ++++++-
 .../LessonResourceSelection/index.vue         |  4 +++-
 .../subPages/SearchFilters.vue                | 10 ---------
 .../kolibri-common/components/SearchBox.vue   | 22 -------------------
 .../components/SearchFiltersPanel/index.vue   | 13 +----------
 .../composables/useBaseSearch.js              | 10 +++++++--
 6 files changed, 19 insertions(+), 48 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
index 48b7edd1b42..3746c98fa6a 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResourceSelection.js
@@ -14,6 +14,11 @@ import useFetch from './useFetch';
  * This utility handles selection rules, manages fetch states for channels, bookmarks,
  * and topic trees, and offers methods to add, remove, or override selected resources.
  *
+ * @param {Object} options
+ * @param {string} options.searchResultsRouteName The name of the route where the search results
+ *  will be displayed so that we can redirect to it when the search terms are updated.
+ *
+ *
  * @typedef {Object} UseResourceSelectionResponse
  * @property {Object} topic Topic tree object, contains the information of the topic,
  *   its ascendants and children.
@@ -46,7 +51,7 @@ import useFetch from './useFetch';
  *
  * @returns {UseResourceSelectionResponse}
  */
-export default function useResourceSelection() {
+export default function useResourceSelection({ searchResultsRouteName } = {}) {
   const store = getCurrentInstance().proxy.$store;
   const route = computed(() => store.state.route);
   const topicId = computed(() => route.value.query.topicId);
@@ -93,6 +98,7 @@ export default function useResourceSelection() {
 
   const useSearchObject = useBaseSearch({
     descendant: topic,
+    searchResultsRouteName,
     // As we dont always show the search filters, we dont need to reload the search results
     // each time the topic changes if not needed
     reloadOnDescendantChange: false,
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
index 8b04034769a..8ff6e6c79ef 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue
@@ -123,7 +123,9 @@
         deselectResources,
         setSelectedResources,
         removeSearchFilterTag,
-      } = useResourceSelection();
+      } = useResourceSelection({
+        searchResultsRouteName: PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
+      });
 
       const { createSnackbar } = useSnackbar();
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
index 698bda89582..fb0c5c54e8b 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SearchFilters.vue
@@ -7,8 +7,6 @@
     showChannels
     showActivities
     :title="topic && searchInFolder$({ folder: topic.title })"
-    @close="showSearch = true"
-    @searchClick="onSearchClick"
     @categorySearchOpen="handleCategorySearchOpen"
   />
 
@@ -120,14 +118,6 @@
         vm.prevRoute = from;
       });
     },
-    methods: {
-      onSearchClick() {
-        this.$router.push({
-          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH_RESULTS,
-          query: this.$route.query,
-        });
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/components/SearchBox.vue b/packages/kolibri-common/components/SearchBox.vue
index 9c97554e844..ed18e82ed61 100644
--- a/packages/kolibri-common/components/SearchBox.vue
+++ b/packages/kolibri-common/components/SearchBox.vue
@@ -43,7 +43,6 @@
           :appearanceOverrides="{ minWidth: '36px', padding: 0 }"
           :aria-label="coreString('startSearchButtonLabel')"
           type="submit"
-          @click="onSearchClick"
         >
           <template #icon>
             <KIcon
@@ -62,7 +61,6 @@
 
 <script>
 
-  import debounce from 'lodash/debounce';
   import commonCoreStrings, { coreString } from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
@@ -95,10 +93,6 @@
         type: String,
         default: null,
       },
-      emitOnInputChange: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
@@ -118,11 +112,6 @@
         return this.value !== null ? this.value : this.$route.query.keywords;
       },
       searchBarDisabled() {
-        if (this.$listeners.searchClick) {
-          // If the parent component is listening for the searchClick event, then we dont disable
-          // the search button to allow clicking on search even if the search input is empty
-          return false;
-        }
         // Disable the search bar if it has been cleared or has not been changed
         return this.searchInputValue === '';
       },
@@ -146,11 +135,6 @@
       value(current) {
         this.searchInputValue = current || '';
       },
-      searchInputValue() {
-        if (this.emitOnInputChange) {
-          this.debouncedUpdateSearchQuery();
-        }
-      },
     },
     created() {
       this.searchInputValue = this.value;
@@ -180,12 +164,6 @@
       updateSearchQuery() {
         this.$emit('change', this.searchInputValue);
       },
-      debouncedUpdateSearchQuery: debounce(function () {
-        this.updateSearchQuery();
-      }, 300),
-      onSearchClick() {
-        this.$emit('searchClick');
-      },
     },
     $trs: {
       find: 'Find',
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 33ab69c7d57..9f73e2d23c6 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -118,12 +118,10 @@
         <SearchBox
           key="channel-search"
           ref="searchBox"
-          emitOnInputChange
           style="margin-bottom: 1em"
           :placeholder="$tr('searchByKeyword')"
           :value="value.keywords || ''"
-          @change="onSearchKeywordsChange"
-          @searchClick="onSearchClick"
+          @change="val => $emit('input', { ...value, keywords: val })"
         />
 
         <ActivityButtonsGroup
@@ -409,15 +407,6 @@
           this.$refs.searchBox.focusSearchBox();
         }
       },
-      onSearchKeywordsChange(val) {
-        if (this.value.keywords === val) {
-          return;
-        }
-        this.$emit('input', { ...this.value, keywords: val });
-      },
-      onSearchClick() {
-        this.$emit('searchClick');
-      },
       /**
        * @public
        */
diff --git a/packages/kolibri-common/composables/useBaseSearch.js b/packages/kolibri-common/composables/useBaseSearch.js
index 98870107d06..f05fd7569be 100644
--- a/packages/kolibri-common/composables/useBaseSearch.js
+++ b/packages/kolibri-common/composables/useBaseSearch.js
@@ -158,6 +158,7 @@ export default function useBaseSearch({
   store,
   router,
   baseurl,
+  searchResultsRouteName,
   reloadOnDescendantChange = true,
   fetchContentNodeProgress,
 }) {
@@ -209,9 +210,14 @@ export default function useBaseSearch({
       } else {
         delete query.keywords;
       }
+
+      const nextRoute = { ...get(route), query };
+      if (searchResultsRouteName) {
+        nextRoute.name = searchResultsRouteName;
+      }
       // Just catch an error from making a redundant navigation rather
       // than try to precalculate this.
-      router.push({ ...get(route), query }).catch(() => {});
+      router.push(nextRoute).catch(() => {});
     },
   });
 
@@ -314,7 +320,7 @@ export default function useBaseSearch({
         [key]: '',
       });
     } else {
-      const keyObject = get(searchTerms)[key];
+      const keyObject = { ...get(searchTerms)[key] };
       delete keyObject[value];
       set(searchTerms, {
         ...get(searchTerms),

From b936e25572a5f6c20ee41945c66a221f4bca0a95 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 27 Jan 2025 08:51:06 -0500
Subject: [PATCH 15/16] Fix height calculation of side panel in mobile devices

---
 packages/kolibri-common/components/SidePanelModal/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index dc6a991c665..7e59bb1f4c7 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -235,7 +235,7 @@
   .side-panel {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    height: 100%;
 
     .side-panel-header {
       z-index: 1;

From 696cfa96cee82536fbf8fdf55ff609647eb07626 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Fri, 31 Jan 2025 19:22:56 -0500
Subject: [PATCH 16/16] Redirect to search results when searching from index
 page

---
 .../LessonResourceSelection/subPages/SelectFromTopicTree.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
index 33c82ec9ec5..192417c4760 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromTopicTree.vue
@@ -83,7 +83,7 @@
 
       props.setGoBack(() => {
         const { searchTopicId } = routeQuery;
-        if (!isTopicFromSearchResult.value || !routeQuery.searchTopicId) {
+        if (!isTopicFromSearchResult.value) {
           return instance.proxy.$router.push({
             name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
           });