From 1f5a9a4b7f6c2a4352793dd9c0c6e5202015cc85 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Tue, 17 Dec 2024 15:12:07 -0800
Subject: [PATCH] Add primary language filtering to useBaseSearch. Allow
 language selection logic to be reused.

---
 .../assets/src/composables/useContentLink.js  |   5 +
 .../assets/src/views/LibraryPage/index.vue    |  84 +++++---
 .../assets/src/views/TopicsPage/index.vue     |  16 +-
 .../assets/test/views/library-page.spec.js    |  22 +-
 .../kolibri-common/components/SearchChips.vue |  17 +-
 .../AccordionSelectGroup.vue                  |  26 +--
 .../SearchFiltersPanel/LanguageSelector.vue   |  65 ++++++
 .../SearchFiltersPanel/SelectGroup.vue        |  54 ++---
 .../components/SearchFiltersPanel/index.vue   |   6 +-
 .../composables/useBaseSearch.js              | 194 ++++++++++++++----
 packages/kolibri/utils/i18n.js                |  26 ++-
 11 files changed, 372 insertions(+), 143 deletions(-)
 create mode 100644 packages/kolibri-common/components/SearchFiltersPanel/LanguageSelector.vue

diff --git a/kolibri/plugins/learn/assets/src/composables/useContentLink.js b/kolibri/plugins/learn/assets/src/composables/useContentLink.js
index d5bce334591..00447fa62f6 100644
--- a/kolibri/plugins/learn/assets/src/composables/useContentLink.js
+++ b/kolibri/plugins/learn/assets/src/composables/useContentLink.js
@@ -2,6 +2,7 @@ import { get } from '@vueuse/core';
 import isEmpty from 'lodash/isEmpty';
 import pick from 'lodash/pick';
 import { computed, getCurrentInstance } from 'vue';
+import { primaryLanguageKey } from 'kolibri-common/composables/useBaseSearch';
 import { ExternalPagePaths, PageNames } from '../constants';
 
 function _decodeBackLinkQuery(query) {
@@ -17,6 +18,10 @@ export default function useContentLink(store) {
 
   function _makeNodeLink(id, isResource, query, deviceId) {
     const params = get(route).params;
+    const oldQuery = get(route).query || {};
+    if (!isResource && oldQuery[primaryLanguageKey]) {
+      query[primaryLanguageKey] = oldQuery[primaryLanguageKey];
+    }
     return {
       name: isResource ? PageNames.TOPICS_CONTENT : PageNames.TOPICS_TOPIC,
       params: pick({ id, deviceId: deviceId || params.deviceId }, ['id', 'deviceId']),
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index b0499ab0f87..4a9e997c1b8 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -49,9 +49,16 @@
           v-else-if="!displayingSearchResults && !rootNodesLoading"
           data-test="channels"
         >
-          <h1 class="channels-label">
-            {{ channelsLabel }}
-          </h1>
+          <KFixedGrid numCols="4">
+            <KFixedGridItem span="3">
+              <h1 class="channels-label">
+                {{ channelsLabel }}
+              </h1>
+            </KFixedGridItem>
+            <KFixedGridItem span="1">
+              <LanguageSelector :primary="true" />
+            </KFixedGridItem>
+          </KFixedGrid>
           <p
             v-if="isLocalLibraryEmpty"
             data-test="nothing-in-lib-label"
@@ -109,6 +116,7 @@
           :class="windowIsLarge ? 'side-panel' : ''"
           data-test="side-panel-local"
           :width="`${sidePanelWidth}px`"
+          :showLanguages="displayingSearchResults"
         />
       </div>
 
@@ -122,6 +130,7 @@
           v-model="searchTerms"
           data-test="side-panel"
           :width="`${sidePanelWidth}px`"
+          :showLanguages="displayingSearchResults"
         />
       </SidePanelModal>
 
@@ -176,20 +185,22 @@
 <script>
 
   import { get, set } from '@vueuse/core';
+  import orderBy from 'lodash/orderBy';
 
   import { onMounted, getCurrentInstance, ref, watch } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
   import samePageCheckGenerator from 'kolibri-common/utils/samePageCheckGenerator';
+  import { getContentLangActive } from 'kolibri/utils/i18n';
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import { mapState } from 'vuex';
   import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal.vue';
   import appCapabilities, { checkCapability } from 'kolibri/utils/appCapabilities';
   import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
-  import { searchKeys } from 'kolibri-common/composables/useBaseSearch';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
+  import LanguageSelector from 'kolibri-common/components/SearchFiltersPanel/LanguageSelector';
   import useChannels from 'kolibri-common/composables/useChannels';
   import { KolibriStudioId, PageNames } from '../../constants';
   import useCardViewStyle from '../../composables/useCardViewStyle';
@@ -233,6 +244,7 @@
       LearnAppBarPage,
       OtherLibraries,
       PostSetupModalGroup,
+      LanguageSelector,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {
@@ -261,6 +273,9 @@
         removeFilterTag,
         clearSearch,
         currentRoute,
+        createBaseSearchGetParams,
+        ensurePrimaryLanguage,
+        primaryLanguage,
       } = useSearch();
       search();
       const { fetchResumableContentNodes } = useLearnerResources();
@@ -300,20 +315,35 @@
               // we want them to be in the same order as the channels list
               set(
                 rootNodes,
-                channels
-                  .map(channel => {
-                    const node = channelCollection.find(n => n.channel_id === channel.id);
-                    if (node) {
-                      // The `channel` comes with additional data that is
-                      // not returned from the ContentNodeResource.
-                      // Namely thumbnail, description and tagline (so far)
-                      node.title = channel.name || node.title;
-                      node.thumbnail = channel.thumbnail;
-                      node.description = channel.tagline || channel.description;
-                      return node;
-                    }
-                  })
-                  .filter(Boolean),
+                // Sort channels by relevance to the current user interface language
+                orderBy(
+                  channels
+                    .map(channel => {
+                      const node = channelCollection.find(n => n.channel_id === channel.id);
+                      if (node) {
+                        // The `channel` comes with additional data that is
+                        // not returned from the ContentNodeResource.
+                        // Namely thumbnail, description and tagline (so far)
+                        node.title = channel.name || node.title;
+                        node.thumbnail = channel.thumbnail;
+                        node.description = channel.tagline || channel.description;
+                        node.included_languages = channel.included_languages;
+                        return node;
+                      }
+                    })
+                    .filter(Boolean),
+                  [
+                    c => getContentLangActive(c.lang, get(primaryLanguage)),
+                    c =>
+                      Math.max(
+                        ...c.included_languages.map(l =>
+                          getContentLangActive(l, get(primaryLanguage)),
+                        ),
+                      ),
+                    'title',
+                  ],
+                  ['desc', 'desc', 'asc'],
+                ),
               );
 
               store.commit('CORE_SET_PAGE_LOADING', false);
@@ -332,7 +362,8 @@
       }
 
       function _showLibrary(baseurl) {
-        return fetchChannels({ baseurl }).then(channels => {
+        const params = createBaseSearchGetParams();
+        return fetchChannels(params).then(channels => {
           if (!channels.length && isUserLoggedIn) {
             router.replace({ name: PageNames.CONTENT_UNAVAILABLE });
             return;
@@ -342,9 +373,7 @@
             return;
           }
 
-          const query = currentRoute().query;
-
-          if (searchKeys.some(key => query[key])) {
+          if (get(displayingSearchResults)) {
             // If currently on a route with search terms
             // just finish early and let the component handle loading
             store.commit('CORE_SET_PAGE_LOADING', false);
@@ -357,7 +386,10 @@
         });
       }
 
-      function showLibrary() {
+      async function showLibrary() {
+        if (!(await ensurePrimaryLanguage())) {
+          return;
+        }
         set(rootNodesLoading, true);
         store.commit('CORE_SET_PAGE_LOADING', true);
         if (props.deviceId) {
@@ -386,6 +418,12 @@
         }
       });
 
+      watch(primaryLanguage, () => {
+        if (!displayingSearchResults.value) {
+          showLibrary();
+        }
+      });
+
       showLibrary();
 
       return {
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 313e86433dd..d428e417028 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -370,12 +370,14 @@
         removeFilterTag,
         clearSearch,
         currentRoute,
+        createBaseSearchGetParams,
+        ensurePrimaryLanguage,
       } = useSearch(topic);
       const { back, genContentLinkKeepCurrentBackLink } = useContentLink();
       const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       const { channelsMap, fetchChannels } = useChannels();
       const { fetchContentNodeProgress, fetchContentNodeTreeProgress } = useContentNodeProgress();
-      const { isUserLoggedIn, isCoach, isAdmin, isSuperuser } = useUser();
+      const { isUserLoggedIn } = useUser();
       const { fetchUserDownloadRequests } = useDownloadRequests(store);
 
       const isRoot = ref(false);
@@ -430,10 +432,7 @@
         let id = props.id;
         const route = currentRoute();
         const skip = route.query && route.query.skip === 'true';
-        const params = {
-          include_coach_content: get(isAdmin) || get(isCoach) || get(isSuperuser),
-          baseurl,
-        };
+        const params = createBaseSearchGetParams(false);
         if (get(isUserLoggedIn) && !baseurl) {
           fetchContentNodeTreeProgress({ id, params });
         }
@@ -486,7 +485,10 @@
         });
       }
 
-      function showTopicsTopic() {
+      async function showTopicsTopic() {
+        if (!(await ensurePrimaryLanguage())) {
+          return;
+        }
         return store.dispatch('loading').then(() => {
           const route = currentRoute();
           store.commit('SET_PAGE_NAME', route.name);
@@ -557,8 +559,6 @@
         type: String,
         default: null,
       },
-      // Our linting doesn't detect usage in the setup function yet.
-      // eslint-disable-next-line vue/no-unused-properties
       id: {
         type: String,
         required: true,
diff --git a/kolibri/plugins/learn/assets/test/views/library-page.spec.js b/kolibri/plugins/learn/assets/test/views/library-page.spec.js
index b4b758bc6bc..62d99692c84 100644
--- a/kolibri/plugins/learn/assets/test/views/library-page.spec.js
+++ b/kolibri/plugins/learn/assets/test/views/library-page.spec.js
@@ -36,6 +36,13 @@ const CHANNEL = {
   name: 'test channel',
   root: 'test root',
   thumbnail: 'test thumbnail',
+  lang: {
+    id: 'es-es',
+    lang_name: 'Español',
+    lang_code: 'es',
+    lang_subcode: 'es',
+    lang_direction: 'ltr',
+  },
 };
 
 jest.mock('kolibri-common/composables/useChannels');
@@ -53,7 +60,13 @@ jest.mock('kolibri/urls');
 
 async function makeWrapper({ options, fullMount = false } = {}) {
   const store = new Store({
-    state: { core: { loading: false } },
+    state: {
+      core: { loading: false },
+      route: {
+        query: {},
+        name: PageNames.TOPICS_TOPIC,
+      },
+    },
     getters: {
       isUserLoggedIn: jest.fn(),
       isLearner: jest.fn(),
@@ -70,6 +83,9 @@ async function makeWrapper({ options, fullMount = false } = {}) {
       SET_PAGE_NAME: jest.fn(),
       CORE_SET_PAGE_LOADING: jest.fn(),
       CORE_SET_ERROR: jest.fn(),
+      SET_QUERY(state, query) {
+        state.route.query = query;
+      },
     },
   });
   let wrapper;
@@ -94,8 +110,10 @@ describe('LibraryPage', () => {
       }),
     );
     ContentNodeResource.fetchCollection.mockImplementation(() =>
-      Promise.resolve([{ id: 'test', title: 'test', channel_id: CHANNEL_ID }]),
+      Promise.resolve([{ id: 'test', title: 'test', channel_id: CHANNEL_ID, lang: CHANNEL.lang }]),
     );
+    router.push = jest.fn().mockReturnValue(Promise.resolve());
+    router.replace = jest.fn().mockReturnValue(Promise.resolve());
   });
   describe('filters button', () => {
     it('is visible when the page is not large and channels are available', async () => {
diff --git a/packages/kolibri-common/components/SearchChips.vue b/packages/kolibri-common/components/SearchChips.vue
index f62523f9b9d..6ebfb665d6c 100644
--- a/packages/kolibri-common/components/SearchChips.vue
+++ b/packages/kolibri-common/components/SearchChips.vue
@@ -40,26 +40,21 @@
     name: 'SearchChips',
     mixins: [commonCoreStrings],
     setup() {
-      const { availableLanguages } = injectBaseSearch();
-      const languagesMap = availableLanguages.value.reduce((map, lang) => {
-        map[lang.id] = lang;
+      const { languageOptions, activeSearchTerms } = injectBaseSearch();
+      const languagesMap = languageOptions.value.reduce((map, lang) => {
+        map[lang.value] = lang.label;
         return map;
       }, {});
       const { channelsMap } = useChannels();
       return {
         channelsMap,
         languagesMap,
+        activeSearchTerms,
       };
     },
-    props: {
-      searchTerms: {
-        type: Object,
-        default: () => ({}),
-      },
-    },
     computed: {
       items() {
-        return flatMap(this.searchTerms, (value, key) => {
+        return flatMap(this.activeSearchTerms, (value, key) => {
           if (key === 'keywords' && value && value.length) {
             return [
               {
@@ -82,7 +77,7 @@
     methods: {
       translate(key, value) {
         if (key === 'languages') {
-          return this.languagesMap[value].lang_name;
+          return this.languagesMap[value];
         }
         if (key === 'channels') {
           return this.channelsMap[value].name;
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
index aaa22652d4f..508255e254e 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
@@ -61,15 +61,15 @@
     </AccordionContainer>
 
     <AccordionContainer
-      v-if="languageOptionsList.length"
+      v-if="languageOptions.length && showLanguages"
       class="accordion-select"
     >
       <AccordionItem
         :title="coreString('languageLabel')"
         :headerAppearanceOverrides="
-          accordionHeaderStyles(anySelectedFor('languages', languageOptionsList))
+          accordionHeaderStyles(anySelectedFor('languages', languageOptions))
         "
-        :disabled="languageOptionsList.every(opt => opt.disabled)"
+        :disabled="languageOptions.every(opt => opt.disabled)"
         :contentAppearanceOverrides="{
           maxHeight: '256px',
           overflowY: 'scroll',
@@ -77,7 +77,7 @@
       >
         <template #content>
           <KCheckbox
-            v-for="lang in languageOptionsList"
+            v-for="lang in languageOptions"
             :key="'lang-' + lang.value"
             :checked="isSelected('languages', lang)"
             :disabled="lang.disabled"
@@ -191,18 +191,18 @@
         availableResourcesNeeded,
         availableGradeLevels,
         availableAccessibilityOptions,
-        availableLanguages,
         availableLibraryCategories,
         searchableLabels,
+        languageOptions,
       } = injectBaseSearch();
 
       return {
         availableResourcesNeeded,
         availableGradeLevels,
         availableAccessibilityOptions,
-        availableLanguages,
         availableLibraryCategories,
         searchableLabels,
+        languageOptions,
       };
     },
     props: {
@@ -214,6 +214,10 @@
           return inputKeys.every(k => Object.prototype.hasOwnProperty.call(value, k));
         },
       },
+      showLanguages: {
+        type: Boolean,
+        default: true,
+      },
       handleCategory: {
         type: Function,
         required: true,
@@ -249,16 +253,6 @@
         }
         return null;
       },
-      languageOptionsList() {
-        return this.availableLanguages.map(language => {
-          return {
-            value: language.id,
-            disabled:
-              this.searchableLabels && !this.searchableLabels.languages.includes(language.id),
-            label: language.lang_name,
-          };
-        });
-      },
       accessibilityOptionsList() {
         return this.availableAccessibilityOptions.map(key => {
           const value = AccessibilityCategories[key];
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/LanguageSelector.vue b/packages/kolibri-common/components/SearchFiltersPanel/LanguageSelector.vue
new file mode 100644
index 00000000000..85cc4614608
--- /dev/null
+++ b/packages/kolibri-common/components/SearchFiltersPanel/LanguageSelector.vue
@@ -0,0 +1,65 @@
+<template>
+
+  <KSelect
+    v-if="languageOptions.length"
+    :options="languageOptions"
+    :disabled="!languageId && enabledLanguageOptions.length < 2"
+    :clearable="!(!languageId && enabledLanguageOptions.length < 2)"
+    :clearText="coreString('clearAction')"
+    :value="selectedLanguage"
+    :label="coreString('languageLabel')"
+    @change="val => (languageId = val && val.value)"
+  />
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { get } from '@vueuse/core';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
+
+  export default {
+    name: 'LanguageSelector',
+    mixins: [commonCoreStrings],
+    setup(props) {
+      const {
+        languageOptions,
+        enabledLanguageOptions,
+        currentLanguageId,
+        currentPrimaryLanguageId,
+      } = injectBaseSearch();
+
+      const languageId = computed({
+        get: () => (props.primary ? currentPrimaryLanguageId.value : currentLanguageId.value),
+        set: val => {
+          if (props.primary) {
+            currentPrimaryLanguageId.value = val;
+          } else {
+            currentLanguageId.value = val;
+          }
+        },
+      });
+
+      const selectedLanguage = computed(
+        () => get(languageOptions).find(lang => lang.value === get(languageId)) || {},
+      );
+
+      return {
+        languageOptions,
+        enabledLanguageOptions,
+        languageId,
+        selectedLanguage,
+      };
+    },
+    props: {
+      primary: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
index cf26123bff5..0a94c833d44 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/SelectGroup.vue
@@ -1,16 +1,9 @@
 <template>
 
   <div>
-    <KSelect
-      v-if="languageOptionsList.length"
-      :options="languageOptionsList"
-      :disabled="!langId && enabledLanguageOptions.length < 2"
-      :clearable="!(!langId && enabledLanguageOptions.length < 2)"
-      :clearText="coreString('clearAction')"
-      :value="selectedLanguage"
-      :label="coreString('languageLabel')"
+    <LanguageSelector
+      v-if="showLanguages"
       :style="selectorStyle"
-      @change="val => handleChange('languages', val)"
     />
     <KSelect
       v-if="contentLevelsList.length"
@@ -22,7 +15,7 @@
       :value="selectedLevel"
       :label="coreString('levelLabel')"
       :style="selectorStyle"
-      @change="val => handleChange('grade_levels', val)"
+      @change="val => handleChange('grade_levels', val && val.value)"
     />
     <KSelect
       v-if="accessibilityOptionsList.length"
@@ -34,7 +27,7 @@
       :value="selectedAccessibilityFilter"
       :label="coreString('accessibility')"
       :style="selectorStyle"
-      @change="val => handleChange('accessibility_labels', val)"
+      @change="val => handleChange('accessibility_labels', val && val.value)"
     />
   </div>
 
@@ -47,21 +40,20 @@
   import { ContentLevels, AccessibilityCategories } from 'kolibri/constants';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { injectBaseSearch } from 'kolibri-common/composables/useBaseSearch';
+  import LanguageSelector from './LanguageSelector';
 
   export default {
     name: 'SelectGroup',
+    components: {
+      LanguageSelector,
+    },
     mixins: [commonCoreStrings],
     setup() {
-      const {
-        availableGradeLevels,
-        availableAccessibilityOptions,
-        availableLanguages,
-        searchableLabels,
-      } = injectBaseSearch();
+      const { availableGradeLevels, availableAccessibilityOptions, searchableLabels } =
+        injectBaseSearch();
       return {
         availableGradeLevels,
         availableAccessibilityOptions,
-        availableLanguages,
         searchableLabels,
       };
     },
@@ -74,6 +66,10 @@
           return inputKeys.every(k => Object.prototype.hasOwnProperty.call(value, k));
         },
       },
+      showLanguages: {
+        type: Boolean,
+        default: true,
+      },
     },
     computed: {
       selectorStyle() {
@@ -83,19 +79,6 @@
           borderRadius: '2px',
         };
       },
-      languageOptionsList() {
-        return this.availableLanguages.map(language => {
-          return {
-            value: language.id,
-            disabled:
-              this.searchableLabels && !this.searchableLabels.languages.includes(language.id),
-            label: language.lang_name,
-          };
-        });
-      },
-      enabledLanguageOptions() {
-        return this.languageOptionsList.filter(l => !l.disabled);
-      },
       accessibilityOptionsList() {
         return this.availableAccessibilityOptions.map(key => {
           const value = AccessibilityCategories[key];
@@ -133,15 +116,6 @@
       enabledContentLevels() {
         return this.contentLevelsList.filter(c => !c.disabled);
       },
-      langId() {
-        return Object.keys(this.value.languages)[0];
-      },
-      selectedLanguage() {
-        if (!this.langId && this.enabledLanguageOptions.length === 1) {
-          return this.enabledLanguageOptions[0];
-        }
-        return this.languageOptionsList.find(o => o.value === this.langId) || {};
-      },
       accessId() {
         return Object.keys(this.value.accessibility_labels)[0];
       },
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index ba2eb32634f..d98e5244be1 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -85,7 +85,7 @@
         <!-- Filter results by learning activity, displaying all options -->
         <SelectGroup
           v-model="inputValue"
-          :showChannels="showChannels"
+          :showLanguages="showLanguages"
           class="section"
         />
         <div
@@ -132,7 +132,7 @@
 
           <AccordionSelectGroup
             v-model="inputValue"
-            :showChannels="showChannels"
+            :showLanguages="showLanguages"
             :activeCategories="activeCategories"
             :handleCategory="handleCategory"
             style="margin-top: 1em"
@@ -244,7 +244,7 @@
         required: false,
         default: null,
       },
-      showChannels: {
+      showLanguages: {
         type: Boolean,
         default: true,
       },
diff --git a/packages/kolibri-common/composables/useBaseSearch.js b/packages/kolibri-common/composables/useBaseSearch.js
index dcee9eb8a25..367f63d8a33 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 { get, set, until } from '@vueuse/core';
 import invert from 'lodash/invert';
+import orderBy from 'lodash/orderBy';
 import logger from 'kolibri-logging';
 import { computed, getCurrentInstance, inject, provide, ref, watch } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
@@ -13,6 +14,7 @@ import {
   NoCategories,
   ResourcesNeededTypes,
 } from 'kolibri/constants';
+import { getContentLangActive } from 'kolibri/utils/i18n';
 import useUser from 'kolibri/composables/useUser';
 
 import { deduplicateResources } from '../utils/contentNode';
@@ -152,13 +154,17 @@ export const searchKeys = [
   'grade_levels',
 ];
 
+export const primaryLanguageKey = 'primaryLanguage';
+
+const allLanguagesValue = 'allLangs';
+
 export default function useBaseSearch({
   descendant,
   store,
   router,
   baseurl,
   fetchContentNodeProgress,
-}) {
+} = {}) {
   // Get store and router references from the curent instance
   // but allow them to be passed in to allow for dependency
   // injection, primarily for tests.
@@ -213,6 +219,24 @@ export default function useBaseSearch({
     },
   });
 
+  const primaryLanguage = computed({
+    get() {
+      if (get(route).query[primaryLanguageKey] === allLanguagesValue) {
+        return;
+      }
+      return get(route).query[primaryLanguageKey];
+    },
+    set(value) {
+      const query = { ...get(route).query };
+      if (value) {
+        query[primaryLanguageKey] = value;
+      } else {
+        query[primaryLanguageKey] = allLanguagesValue;
+      }
+      router.push({ ...get(route), query }).catch(() => {});
+    },
+  });
+
   const displayingSearchResults = computed(() =>
     // Happily this works even for keywords, because calling Object.keys
     // on a string value will give an array of the indexes of a string
@@ -230,43 +254,66 @@ export default function useBaseSearch({
     }
   }
 
-  function search() {
-    const currentBaseUrl = get(baseurl);
+  function createBaseSearchGetParams(setDescendant = true) {
     const getParams = {
       include_coach_content: get(isAdmin) || get(isCoach) || get(isSuperuser),
-      baseurl: currentBaseUrl,
+      baseurl: get(baseurl),
     };
-    const descValue = descendant ? get(descendant) : null;
-    if (descValue) {
-      getParams.tree_id = descValue.tree_id;
-      getParams.lft__gt = descValue.lft;
-      getParams.rght__lt = descValue.rght;
+    if (setDescendant && descendant) {
+      const descValue = get(descendant);
+      if (descValue) {
+        getParams.tree_id = descValue.tree_id;
+        getParams.lft__gt = descValue.lft;
+        getParams.rght__lt = descValue.rght;
+      }
     }
-    if (get(displayingSearchResults)) {
-      getParams.max_results = 25;
-      const terms = get(searchTerms);
-      set(searchResultsLoading, true);
-      for (const key of searchKeys) {
-        if (key === 'categories') {
-          if (terms[key][AllCategories]) {
-            getParams['categories__isnull'] = false;
-            continue;
-          } else if (terms[key][NoCategories]) {
-            getParams['categories__isnull'] = true;
-            continue;
-          }
-        }
-        if (key === 'channels' && descValue) {
+    const primaryLang = get(primaryLanguage);
+    if (primaryLang && primaryLang !== allLanguagesValue) {
+      const langCode = primaryLang.split('-')[0];
+      getParams.languages = get(languagesList)
+        .filter(lang => lang.id.startsWith(langCode))
+        .map(lang => lang.id);
+    }
+    return getParams;
+  }
+
+  function createSearchGetParams() {
+    const getParams = createBaseSearchGetParams();
+    const terms = get(searchTerms);
+    for (const key of searchKeys) {
+      if (key === 'categories') {
+        if (terms[key][AllCategories]) {
+          getParams['categories__isnull'] = false;
+          continue;
+        } else if (terms[key][NoCategories]) {
+          getParams['categories__isnull'] = true;
           continue;
-        }
-        const keys = Object.keys(terms[key]);
-        if (keys.length) {
-          getParams[key] = keys;
         }
       }
-      if (terms.keywords) {
-        getParams.keywords = terms.keywords;
+      if (key === 'channels' && descendant ? get(descendant) : null) {
+        continue;
       }
+      if (key === 'keywords') {
+        getParams.keywords = terms[key];
+        continue;
+      }
+      const keys = Object.keys(terms[key]);
+      if (keys.length) {
+        getParams[key] = keys;
+      }
+    }
+    return getParams;
+  }
+
+  async function search() {
+    await until(globalLabelsLoading).toBe(false);
+    const desc = descendant ? get(descendant) : null;
+    if (get(displayingSearchResults)) {
+      // If we're actually displaying search results
+      // then we need to load all the search results to display
+      set(searchResultsLoading, true);
+      const getParams = createSearchGetParams();
+      getParams.max_results = 25;
       if (get(isUserLoggedIn)) {
         fetchContentNodeProgress?.(getParams);
       }
@@ -276,7 +323,8 @@ export default function useBaseSearch({
         _setAvailableLabels(data.labels);
         set(searchResultsLoading, false);
       });
-    } else if (descValue) {
+    } else if (desc || get(primaryLanguage)) {
+      const getParams = createBaseSearchGetParams();
       getParams.max_results = 1;
       ContentNodeResource.fetchCollection({ getParams }).then(data => {
         _setAvailableLabels(data.labels);
@@ -305,7 +353,7 @@ export default function useBaseSearch({
     }
   }
 
-  function removeFilterTag({ value, key }) {
+  function removeSearchTerm({ value, key }) {
     if (key === 'keywords') {
       set(searchTerms, {
         ...get(searchTerms),
@@ -335,6 +383,8 @@ export default function useBaseSearch({
     });
   }
 
+  watch(primaryLanguage, search);
+
   // Helper to get the route information in a setup() function
   function currentRoute() {
     return get(route);
@@ -409,9 +459,61 @@ export default function useBaseSearch({
     return _getGlobalLabels('accessibilityOptionsList', []);
   });
   const languagesList = computed(() => {
-    return _getGlobalLabels('languagesList', []);
+    return orderBy(
+      _getGlobalLabels('languagesList', []),
+      [getContentLangActive, 'id'],
+      ['desc', 'asc'],
+    );
   });
 
+  const languageOptionsList = computed(() => {
+    const searchableLabels = get(labels);
+    return get(languagesList).map(language => {
+      return {
+        value: language.id,
+        disabled: searchableLabels && !searchableLabels.languages.includes(language.id),
+        label: language.lang_name,
+      };
+    });
+  });
+
+  const enabledLanguageOptions = computed(() => {
+    return get(languageOptionsList).filter(l => !l.disabled);
+  });
+
+  const currentLanguageId = computed({
+    get() {
+      return get(searchTerms).languages ? Object.keys(get(searchTerms).languages)[0] : null;
+    },
+    set(value) {
+      set(searchTerms, {
+        ...get(searchTerms),
+        languages: value ? { [value]: true } : {},
+      });
+    },
+  });
+
+  async function ensurePrimaryLanguage() {
+    await until(globalLabelsLoading).toBe(false);
+    if (!get(route).query[primaryLanguageKey]) {
+      // If we have no currently selected primary language key
+      // compute the closest match to the currently active interface language
+      const closestMatchChannelLanguage = get(languagesList)[0];
+      const language =
+        closestMatchChannelLanguage && getContentLangActive(closestMatchChannelLanguage) > 1
+          ? closestMatchChannelLanguage.id
+          : allLanguagesValue;
+      router.replace({
+        query: {
+          ...currentRoute().query,
+          [primaryLanguageKey]: language,
+        },
+      });
+      return false;
+    }
+    return true;
+  }
+
   provide('availableLearningActivities', learningActivitiesShown);
   provide('availableLibraryCategories', libraryCategories);
   provide('availableResourcesNeeded', resourcesNeeded);
@@ -419,6 +521,11 @@ export default function useBaseSearch({
   provide('availableAccessibilityOptions', accessibilityOptionsList);
   provide('availableLanguages', languagesList);
 
+  provide('currentLanguageId', currentLanguageId);
+  provide('currentPrimaryLanguageId', primaryLanguage);
+  provide('languageOptions', languageOptionsList);
+  provide('enabledLanguageOptions', enabledLanguageOptions);
+
   // Provide an object of searchable labels
   // This is a manifest of all the labels that could still be selected and produce search results
   // given the currently applied search filters.
@@ -427,9 +534,12 @@ export default function useBaseSearch({
   // Currently selected search terms
   provide('activeSearchTerms', searchTerms);
 
+  provide('removeSearchTerm', removeSearchTerm);
+
   return {
     currentRoute,
     searchTerms,
+    createBaseSearchGetParams,
     displayingSearchResults,
     searchLoading,
     moreLoading,
@@ -438,8 +548,9 @@ export default function useBaseSearch({
     labels,
     search,
     searchMore,
-    removeFilterTag,
     clearSearch,
+    primaryLanguage,
+    ensurePrimaryLanguage,
   };
 }
 
@@ -456,6 +567,14 @@ export function injectBaseSearch() {
   const availableLanguages = inject('availableLanguages');
   const searchableLabels = inject('searchableLabels');
   const activeSearchTerms = inject('activeSearchTerms');
+
+  const currentLanguageId = inject('currentLanguageId');
+  const currentPrimaryLanguageId = inject('currentPrimaryLanguageId');
+  const languageOptions = inject('languageOptions');
+  const enabledLanguageOptions = inject('enabledLanguageOptions');
+
+  const removeSearchTerm = inject('removeSearchTerm');
+
   return {
     availableLearningActivities,
     availableLibraryCategories,
@@ -465,5 +584,10 @@ export function injectBaseSearch() {
     availableLanguages,
     searchableLabels,
     activeSearchTerms,
+    currentLanguageId,
+    currentPrimaryLanguageId,
+    languageOptions,
+    enabledLanguageOptions,
+    removeSearchTerm,
   };
 }
diff --git a/packages/kolibri/utils/i18n.js b/packages/kolibri/utils/i18n.js
index 769cb5f368c..cc9ce41e07b 100644
--- a/packages/kolibri/utils/i18n.js
+++ b/packages/kolibri/utils/i18n.js
@@ -1,4 +1,5 @@
 import has from 'lodash/has';
+import isString from 'lodash/isString';
 import Vue from 'vue';
 import logger from 'kolibri-logging';
 import plugin_data from 'kolibri-plugin-data';
@@ -32,15 +33,30 @@ const contentLanguageCodes = {
   yo: ['yor'],
 };
 
-export const getContentLangActive = language => {
-  const langCode = languageIdToCode(currentLanguage);
+export const getContentLangActive = (language, comparisonLanguage = currentLanguage) => {
+  if (isString(language)) {
+    // If the language is a string, assume it's a language code
+    // convert to object format
+    language = {
+      id: language,
+      lang_code: languageIdToCode(language),
+    };
+  }
+  const langCode = languageIdToCode(comparisonLanguage);
   const additionalCodes = contentLanguageCodes[langCode] || [];
-  if (language.id.toLowerCase() === currentLanguage.toLowerCase()) {
-    // Best possible match, return a 2 to have it still be truthy, but distinguishable
-    // from a 1 which is a lang_code match
+  if (language.id.toLowerCase() === comparisonLanguage.toLowerCase()) {
+    // Best possible match, return a 3 to sort first
+    // Exact match between content and the language the user is using
+    return 3;
+  }
+  if (language.id === langCode || additionalCodes.includes(language.id)) {
+    // Here the language for the content has no region code, and we have an exact
+    // match with the language we are using.
     return 2;
   }
   if (language.lang_code === langCode || additionalCodes.includes(language.lang_code)) {
+    // Here the language for the content has a region code, but the language itself
+    // matches, even if the region is different.
     return 1;
   }
   return 0;