From 093a4d2be9a33d655c3a2db4e44006879f5ecd85 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 12 Mar 2024 09:59:54 -0500
Subject: [PATCH 01/11] use KListWithOverflow in LanguageSwitcherList

---
 .../LanguageSwitcherList.vue                  | 82 +++++++++++--------
 kolibri/core/package.json                     |  2 +-
 packages/kolibri-core-for-export/package.json |  2 +-
 packages/kolibri-tools/lib/cli.js             |  2 +-
 yarn.lock                                     |  8 +-
 5 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index eff759ab969..f74a1cd7db2 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -1,35 +1,44 @@
 <template>
 
   <div>
-    <KButtonGroup style="margin-top: 8px; position: relative; left: -16px;">
+    <div class="languages-list">
       <KIconButton
         icon="language"
         aria-hidden="true"
         tabindex="-1"
-        class="globe"
+        class="globe px-8"
         @click="showLanguageModal = true"
       />
-      <span class="selected" :title="selectedLanguage.english_name">
+      <span class="selected no-shrink px-8" :title="selectedLanguage.english_name">
         {{ selectedLanguage.lang_name }}
       </span>
-      <KButton
-        v-for="language in buttonLanguages"
-        :key="language.id"
-        :text="language.lang_name"
-        :title="language.english_name"
-        class="lang"
-        appearance="basic-link"
-        @click="switchLanguage(language.id)"
-      />
-
-      <KButton
-        v-if="numSelectableLanguages > numVisibleLanguageBtns + 1"
-        :text="$tr('showMoreLanguagesSelector')"
-        :primary="false"
-        appearance="flat-button"
-        @click="showLanguageModal = true"
-      />
-    </KButtonGroup>
+      <KListWithOverflow
+        :items="buttonLanguages"
+        :appearanceOverrides="{
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+        }"
+      >
+        <template #item="{ item }">
+          <KButton
+            :text="item.lang_name"
+            :title="item.english_name"
+            class="lang px-8"
+            appearance="basic-link"
+            @click="switchLanguage(item.id)"
+          />
+        </template>
+        <template #more>
+          <KButton
+            :text="$tr('showMoreLanguagesSelector')"
+            :primary="false"
+            class="px-8"
+            appearance="flat-button"
+            @click="showLanguageModal = true"
+          />
+        </template>
+      </KListWithOverflow>
+    </div>
     <LanguageSwitcherModal
       v-if="showLanguageModal"
       class="ta-l"
@@ -80,23 +89,10 @@
       selectedLanguage() {
         return availableLanguages[currentLanguage];
       },
-      numVisibleLanguageBtns() {
-        // At visibleBtns = 0, only the "More languages" button will show
-        let visibleBtns = 4;
-        if (this.parentBreakpoint < 0) {
-          visibleBtns = this.windowBreakpoint;
-        } else {
-          visibleBtns = this.parentBreakpoint;
-        }
-        return Math.min(4, visibleBtns);
-      },
       numSelectableLanguages() {
         return this.selectableLanguages.length;
       },
       buttonLanguages() {
-        if (this.selectableLanguages.length <= this.numVisibleLanguageBtns + 1) {
-          return this.selectableLanguages.slice().sort(compareLanguages);
-        }
         return this.selectableLanguages
           .slice()
           .sort((a, b) => {
@@ -111,7 +107,6 @@
             }
             return compareLanguages(a, b);
           })
-          .slice(0, this.numVisibleLanguageBtns);
       },
     },
     $trs: {
@@ -146,4 +141,21 @@
     text-align: left;
   }
 
+  .languages-list {
+    margin-top: 8px;
+    position: relative;
+    left: -16px;
+    display: flex;
+    align-items: center;
+  }
+
+  .no-shrink {
+    flex-shrink: 0;
+  }
+
+  .px-8 {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
 </style>
diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 4e1a77e7989..7002fb7c72f 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.0.1",
+    "kolibri-design-system": "3.1.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 7836906168d..bc4dd459c99 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.0.1",
+    "kolibri-design-system": "3.1.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/packages/kolibri-tools/lib/cli.js b/packages/kolibri-tools/lib/cli.js
index 5a7b161a2d5..185214f896b 100755
--- a/packages/kolibri-tools/lib/cli.js
+++ b/packages/kolibri-tools/lib/cli.js
@@ -80,7 +80,7 @@ function runWebpackBuild(mode, bundleData, devServer, options, cb = null) {
     hot: options.hot && devServer,
     port: devServer && options.port,
     mode: webpackMode,
-    cache: options.cache,
+    cache: false,
     transpile: options.transpile,
     devServer,
     requireKdsPath: options.requireKdsPath,
diff --git a/yarn.lock b/yarn.lock
index b196a47d700..06721eb43be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7758,10 +7758,10 @@ kolibri-constants@0.2.5:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.0.1.tgz#ba6368c78ffab1d6195b828b1aacc4f11b9a67c3"
-  integrity sha512-/O+KuYTGiv5z9VTlm8bIWZwanMdearGmIP162EqaVn2tIbo/hY42lsuAbGSTZPi5CITm+LJ9r99ogImDRH8z2w==
+kolibri-design-system@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.0.tgz#b8cfeeba3c41b0d2c43b4098732367e6732763a8"
+  integrity sha512-Xynv24J0uKJFQvhTgbOOWZdRRUMO3NSsobCCrD6R6lvzUqCEqcrJTLgK0ls6LX0MZu2dzxMGA0riLZx4qwikJw==
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 5cd4b303992b71fd480413d1a2c66cdbe6496377 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 12 Mar 2024 10:06:37 -0500
Subject: [PATCH 02/11] Lint files

---
 .../LanguageSwitcherList.vue                  | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index f74a1cd7db2..064e02a1f4c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -9,7 +9,7 @@
         class="globe px-8"
         @click="showLanguageModal = true"
       />
-      <span class="selected no-shrink px-8" :title="selectedLanguage.english_name">
+      <span class="no-shrink px-8 selected" :title="selectedLanguage.english_name">
         {{ selectedLanguage.lang_name }}
       </span>
       <KListWithOverflow
@@ -89,24 +89,19 @@
       selectedLanguage() {
         return availableLanguages[currentLanguage];
       },
-      numSelectableLanguages() {
-        return this.selectableLanguages.length;
-      },
       buttonLanguages() {
-        return this.selectableLanguages
-          .slice()
-          .sort((a, b) => {
-            const aPriority = prioritizedLanguages.includes(a.id);
-            const bPriority = prioritizedLanguages.includes(b.id);
-            if (aPriority && bPriority) {
-              return compareLanguages(a, b);
-            } else if (aPriority && !bPriority) {
-              return -1;
-            } else if (!aPriority && bPriority) {
-              return 1;
-            }
+        return this.selectableLanguages.slice().sort((a, b) => {
+          const aPriority = prioritizedLanguages.includes(a.id);
+          const bPriority = prioritizedLanguages.includes(b.id);
+          if (aPriority && bPriority) {
             return compareLanguages(a, b);
-          })
+          } else if (aPriority && !bPriority) {
+            return -1;
+          } else if (!aPriority && bPriority) {
+            return 1;
+          }
+          return compareLanguages(a, b);
+        });
       },
     },
     $trs: {
@@ -142,11 +137,11 @@
   }
 
   .languages-list {
-    margin-top: 8px;
     position: relative;
     left: -16px;
     display: flex;
     align-items: center;
+    margin-top: 8px;
   }
 
   .no-shrink {
@@ -154,8 +149,8 @@
   }
 
   .px-8 {
-    padding-left: 8px;
     padding-right: 8px;
+    padding-left: 8px;
   }
 
 </style>

From c5c0ca5f2da52e824e15a6be2ced9ab76fe4c2f3 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 3 Apr 2024 11:03:02 -0500
Subject: [PATCH 03/11] Update KDS to 3.1.1

---
 kolibri/core/package.json |  2 +-
 yarn.lock                 | 29 +++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 7002fb7c72f..17a92e6ce4a 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.1.0",
+    "kolibri-design-system": "3.1.1",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index 06721eb43be..9c50c24b2fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2376,6 +2376,15 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7778,6 +7787,26 @@ kolibri-design-system@3.1.0:
     vue-intl "^3.1.0"
     xstate "^4.38.3"
 
+kolibri-design-system@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.1.tgz#f140b5732d57432eb6ac02af6a01ba00d227eedf"
+  integrity sha512-cqC3J0ztp2VpGjrs4G0ujgxVYFQb96BXnfqiYg/mmmOVd+mSA2ci3dCFUKYXRtFZQswcLAL2XeaFg0aWpqVdXg==
+  dependencies:
+    "@vue/composition-api" "^1.7.2"
+    aphrodite "https://github.com/learningequality/aphrodite/"
+    autosize "^3.0.21"
+    css-element-queries "^1.2.0"
+    date-fns "^1.30.1"
+    frame-throttle "^3.0.0"
+    fuzzysearch "^1.0.3"
+    keen-ui "^1.3.0"
+    lodash "^4.17.15"
+    popper.js "^1.14.6"
+    purecss "^0.6.2"
+    tippy.js "^4.2.1"
+    vue-intl "^3.1.0"
+    xstate "^4.38.3"
+
 launch-editor-middleware@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.6.1.tgz#7f2f400d8dda2283b69d02e9d83b1d272fef2bfb"

From f8ca32d0f72761ebb1b5465edaeb85111f280773 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 3 Apr 2024 14:21:54 -0500
Subject: [PATCH 04/11] Remove unused code

---
 .../LanguageSwitcherList.vue                  | 13 -------
 .../onboarding-forms/DefaultLanguageForm.vue  | 34 +------------------
 2 files changed, 1 insertion(+), 46 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 064e02a1f4c..af74d331882 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -52,7 +52,6 @@
 <script>
 
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
@@ -65,18 +64,6 @@
       LanguageSwitcherModal,
     },
     mixins: [languageSwitcherMixin],
-    setup() {
-      const { windowBreakpoint } = useKResponsiveWindow();
-      return {
-        windowBreakpoint,
-      };
-    },
-    props: {
-      parentBreakpoint: {
-        type: Number,
-        default: -1,
-      },
-    },
     data() {
       return {
         showLanguageModal: false,
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue
index 24cda2f506a..ef1854ca6cc 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue
@@ -1,12 +1,10 @@
 <template>
 
   <OnboardingStepBase
-    ref="container"
     :title="$tr('languageFormHeader')"
     @continue="handleSubmit"
-    @resize="updateWidth"
   >
-    <LanguageSwitcherList :parentBreakpoint="parentBreakpoint" />
+    <LanguageSwitcherList />
   </OnboardingStepBase>
 
 </template>
@@ -23,41 +21,11 @@
       OnboardingStepBase,
       LanguageSwitcherList,
     },
-    data() {
-      return {
-        parentBreakpoint: 4,
-      };
-    },
-    mounted() {
-      this.updateWidth();
-      window.addEventListener('resize', this.updateWidth);
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', this.updateWidth);
-    },
     inject: ['wizardService'],
     methods: {
       handleSubmit() {
         this.wizardService.send('CONTINUE');
       },
-      updateWidth() {
-        const element = this.$refs.container.$el;
-        const width = element.offsetWidth;
-        let num = 4;
-
-        if (width < 440) {
-          num = 0;
-        } else if (width < 520) {
-          num = 1;
-        } else if (width < 600) {
-          num = 2;
-        } else if (width < 660) {
-          num = 3;
-        } else {
-          num = 4;
-        }
-        this.parentBreakpoint = num;
-      },
     },
     $trs: {
       languageFormHeader: {

From 3fadb6befe31373e5b50438eccca2abfa79322c2 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 8 Apr 2024 18:22:32 -0500
Subject: [PATCH 05/11] Center languages list

---
 .../LanguageSwitcherList.vue                  | 36 ++++++++++++-------
 yarn.lock                                     |  9 -----
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index af74d331882..3eed317a19c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -2,31 +2,34 @@
 
   <div>
     <div class="languages-list">
-      <KIconButton
-        icon="language"
-        aria-hidden="true"
-        tabindex="-1"
-        class="globe px-8"
-        @click="showLanguageModal = true"
-      />
-      <span class="no-shrink px-8 selected" :title="selectedLanguage.english_name">
-        {{ selectedLanguage.lang_name }}
-      </span>
       <KListWithOverflow
         :items="buttonLanguages"
         :appearanceOverrides="{
-          justifyContent: 'flex-start',
+          justifyContent: 'center',
           alignItems: 'center',
         }"
       >
         <template #item="{ item }">
           <KButton
+            v-if="!item.isSelected"
             :text="item.lang_name"
             :title="item.english_name"
             class="lang px-8"
             appearance="basic-link"
             @click="switchLanguage(item.id)"
           />
+          <div v-else>
+            <KIconButton
+              icon="language"
+              aria-hidden="true"
+              tabindex="-1"
+              class="globe px-8"
+              @click="showLanguageModal = true"
+            />
+            <span class="no-shrink px-8 selected" :title="item.english_name">
+              {{ item.lang_name }}
+            </span>
+          </div>
         </template>
         <template #more>
           <KButton
@@ -77,7 +80,7 @@
         return availableLanguages[currentLanguage];
       },
       buttonLanguages() {
-        return this.selectableLanguages.slice().sort((a, b) => {
+        const buttonLanguages = this.selectableLanguages.slice().sort((a, b) => {
           const aPriority = prioritizedLanguages.includes(a.id);
           const bPriority = prioritizedLanguages.includes(b.id);
           if (aPriority && bPriority) {
@@ -89,6 +92,11 @@
           }
           return compareLanguages(a, b);
         });
+        buttonLanguages.unshift({
+          ...this.selectedLanguage,
+          isSelected: true,
+        });
+        return buttonLanguages;
       },
     },
     $trs: {
@@ -117,6 +125,9 @@
 
   .lang {
     @include font-family-language-names;
+    /deep/ span {
+      white-space: nowrap !important;
+    }
   }
 
   .ta-l {
@@ -129,6 +140,7 @@
     display: flex;
     align-items: center;
     margin-top: 8px;
+    justify-content: center;
   }
 
   .no-shrink {
diff --git a/yarn.lock b/yarn.lock
index 9c50c24b2fb..33ac72f469a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2376,15 +2376,6 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
-  version "2.2.3"
-  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^4.0.2"
-    string-hash "^1.1.3"
-
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"

From 30b2d44e9a3d16e34ab29eba4a017ee6d50608a3 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Tue, 9 Apr 2024 14:59:23 -0500
Subject: [PATCH 06/11] Fix responsiveness on login

---
 .../views/language-switcher/LanguageSwitcherList.vue |  8 +++++++-
 .../assets/src/views/LanguageSwitcherFooter.vue      | 12 ++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 3eed317a19c..d3c5c08443c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -5,7 +5,7 @@
       <KListWithOverflow
         :items="buttonLanguages"
         :appearanceOverrides="{
-          justifyContent: 'center',
+          justifyContent: center ? 'center' : 'flex-start',
           alignItems: 'center',
         }"
       >
@@ -63,6 +63,12 @@
 
   export default {
     name: 'LanguageSwitcherList',
+    props: {
+      center: {
+        type: Boolean,
+        default: false,
+      },
+    },
     components: {
       LanguageSwitcherModal,
     },
diff --git a/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue b/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
index adf49cebd34..7f2601b2f37 100644
--- a/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
+++ b/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
@@ -1,6 +1,8 @@
 <template>
 
-  <LanguageSwitcherList class="list" />
+  <div class="language-switcher-wrapper">
+    <LanguageSwitcherList center class="list" />
+  </div>
 
 </template>
 
@@ -21,10 +23,16 @@
 
 <style lang="scss" scoped>
 
+  .language-switcher-wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
   .list {
     margin-right: 36px;
     margin-left: 36px;
-    text-align: center;
+    max-width: 1000px;
+    flex-grow: 1;
   }
 
 </style>

From e994792024bfd312c17a94530ea6d03e958e3a40 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 17 Apr 2024 09:25:06 -0500
Subject: [PATCH 07/11] Update KDS

---
 .../language-switcher/LanguageSwitcherList.vue  | 17 +++++++----------
 kolibri/core/package.json                       |  2 +-
 .../assets/src/views/LanguageSwitcherFooter.vue |  5 +++--
 yarn.lock                                       | 17 +++++++++++++----
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index d3c5c08443c..b3bffbd52af 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -26,7 +26,7 @@
               class="globe px-8"
               @click="showLanguageModal = true"
             />
-            <span class="no-shrink px-8 selected" :title="item.english_name">
+            <span class="no-shrink px-8" :title="item.english_name">
               {{ item.lang_name }}
             </span>
           </div>
@@ -63,16 +63,16 @@
 
   export default {
     name: 'LanguageSwitcherList',
+    components: {
+      LanguageSwitcherModal,
+    },
+    mixins: [languageSwitcherMixin],
     props: {
       center: {
         type: Boolean,
         default: false,
       },
     },
-    components: {
-      LanguageSwitcherModal,
-    },
-    mixins: [languageSwitcherMixin],
     data() {
       return {
         showLanguageModal: false,
@@ -125,12 +125,9 @@
     right: -4px;
   }
 
-  .selected {
-    margin-left: 8px;
-  }
-
   .lang {
     @include font-family-language-names;
+
     /deep/ span {
       white-space: nowrap !important;
     }
@@ -145,8 +142,8 @@
     left: -16px;
     display: flex;
     align-items: center;
-    margin-top: 8px;
     justify-content: center;
+    margin-top: 8px;
   }
 
   .no-shrink {
diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 17a92e6ce4a..53ba6a1ccad 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.1.1",
+    "kolibri-design-system": "3.2.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue b/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
index 7f2601b2f37..5d2e74655e9 100644
--- a/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
+++ b/kolibri/plugins/user_auth/assets/src/views/LanguageSwitcherFooter.vue
@@ -28,11 +28,12 @@
     justify-content: center;
     width: 100%;
   }
+
   .list {
+    flex-grow: 1;
+    max-width: 1000px;
     margin-right: 36px;
     margin-left: 36px;
-    max-width: 1000px;
-    flex-grow: 1;
   }
 
 </style>
diff --git a/yarn.lock b/yarn.lock
index 33ac72f469a..ad2bc7bce7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2376,6 +2376,15 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7778,10 +7787,10 @@ kolibri-design-system@3.1.0:
     vue-intl "^3.1.0"
     xstate "^4.38.3"
 
-kolibri-design-system@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.1.tgz#f140b5732d57432eb6ac02af6a01ba00d227eedf"
-  integrity sha512-cqC3J0ztp2VpGjrs4G0ujgxVYFQb96BXnfqiYg/mmmOVd+mSA2ci3dCFUKYXRtFZQswcLAL2XeaFg0aWpqVdXg==
+kolibri-design-system@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.2.0.tgz#c96de8c09133bf7f60545254233bd042a51554ba"
+  integrity sha512-wZwRRQDv1Xy/FWgBVYXvZZXfELjsDsyS09q3A7wE00VyqTNYj7gZwkKUA35pJ9SOqYTKhJbdNYeWo9N2eXXVaw==
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From a148481cd8143b97df14a8e5bbbfe84deb600586 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 22 Apr 2024 09:05:42 -0500
Subject: [PATCH 08/11] Fix edge cases

---
 .../LanguageSwitcherList.vue                  | 28 +++++++++++++-----
 yarn.lock                                     | 29 -------------------
 2 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index b3bffbd52af..91cca9c4e2c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -18,14 +18,16 @@
             appearance="basic-link"
             @click="switchLanguage(item.id)"
           />
-          <div v-else>
-            <KIconButton
-              icon="language"
-              aria-hidden="true"
-              tabindex="-1"
-              class="globe px-8"
-              @click="showLanguageModal = true"
-            />
+          <div v-else class="d-flex">
+            <div class="lang-icon">
+              <KIconButton
+                icon="language"
+                aria-hidden="true"
+                tabindex="-1"
+                class="globe px-8"
+                @click="showLanguageModal = true"
+              />
+            </div>
             <span class="no-shrink px-8" :title="item.english_name">
               {{ item.lang_name }}
             </span>
@@ -148,6 +150,7 @@
 
   .no-shrink {
     flex-shrink: 0;
+    white-space: nowrap;
   }
 
   .px-8 {
@@ -155,4 +158,13 @@
     padding-left: 8px;
   }
 
+  .d-flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .lang-icon {
+    min-width: 40px;
+  }
+
 </style>
diff --git a/yarn.lock b/yarn.lock
index fd6fc68bf5f..e444d317afa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2405,15 +2405,6 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
-  version "2.2.3"
-  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^4.0.2"
-    string-hash "^1.1.3"
-
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7836,26 +7827,6 @@ kolibri-design-system@3.2.0:
     vue-intl "^3.1.0"
     xstate "^4.38.3"
 
-kolibri-design-system@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.1.tgz#f140b5732d57432eb6ac02af6a01ba00d227eedf"
-  integrity sha512-cqC3J0ztp2VpGjrs4G0ujgxVYFQb96BXnfqiYg/mmmOVd+mSA2ci3dCFUKYXRtFZQswcLAL2XeaFg0aWpqVdXg==
-  dependencies:
-    "@vue/composition-api" "^1.7.2"
-    aphrodite "git+https://github.com/learningequality/aphrodite.git"
-    autosize "^3.0.21"
-    css-element-queries "^1.2.0"
-    date-fns "^1.30.1"
-    frame-throttle "^3.0.0"
-    fuzzysearch "^1.0.3"
-    keen-ui "^1.3.0"
-    lodash "^4.17.15"
-    popper.js "^1.14.6"
-    purecss "^0.6.2"
-    tippy.js "^4.2.1"
-    vue-intl "^3.1.0"
-    xstate "^4.38.3"
-
 launch-editor-middleware@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.6.1.tgz#7f2f400d8dda2283b69d02e9d83b1d272fef2bfb"

From 7581f47578a36fe013fa3922639b4287399bf22e Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 22 Apr 2024 09:13:24 -0500
Subject: [PATCH 09/11] Clean unintended changes

---
 .../language-switcher/LanguageSwitcherList.vue  |  2 --
 packages/kolibri-core-for-export/package.json   |  2 +-
 packages/kolibri-tools/lib/cli.js               |  2 +-
 yarn.lock                                       | 17 +++++++++++++----
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 91cca9c4e2c..101bfc30097 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -140,8 +140,6 @@
   }
 
   .languages-list {
-    position: relative;
-    left: -16px;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 74deb5ef2ff..844da6f689c 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.1.0",
+    "kolibri-design-system": "3.0.1",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/packages/kolibri-tools/lib/cli.js b/packages/kolibri-tools/lib/cli.js
index 185214f896b..5a7b161a2d5 100755
--- a/packages/kolibri-tools/lib/cli.js
+++ b/packages/kolibri-tools/lib/cli.js
@@ -80,7 +80,7 @@ function runWebpackBuild(mode, bundleData, devServer, options, cb = null) {
     hot: options.hot && devServer,
     port: devServer && options.port,
     mode: webpackMode,
-    cache: false,
+    cache: options.cache,
     transpile: options.transpile,
     devServer,
     requireKdsPath: options.requireKdsPath,
diff --git a/yarn.lock b/yarn.lock
index e444d317afa..17529110761 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2405,6 +2405,15 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7787,10 +7796,10 @@ kolibri-constants@0.2.5:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.0.tgz#b8cfeeba3c41b0d2c43b4098732367e6732763a8"
-  integrity sha512-Xynv24J0uKJFQvhTgbOOWZdRRUMO3NSsobCCrD6R6lvzUqCEqcrJTLgK0ls6LX0MZu2dzxMGA0riLZx4qwikJw==
+kolibri-design-system@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.0.1.tgz#ba6368c78ffab1d6195b828b1aacc4f11b9a67c3"
+  integrity sha512-/O+KuYTGiv5z9VTlm8bIWZwanMdearGmIP162EqaVn2tIbo/hY42lsuAbGSTZPi5CITm+LJ9r99ogImDRH8z2w==
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"

From 3cb10b4b422739190459eaf86cf4deff67b13188 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 24 Apr 2024 08:53:06 -0500
Subject: [PATCH 10/11] Show stacked Selected Language whenn all list items are
 hidden

---
 .../LanguageSwitcherList.vue                  | 51 ++++++++-----------
 .../language-switcher/SelectedLanguage.vue    | 51 +++++++++++++++++++
 yarn.lock                                     |  9 ----
 3 files changed, 71 insertions(+), 40 deletions(-)
 create mode 100644 kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue

diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 101bfc30097..d82c79b6608 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -18,30 +18,27 @@
             appearance="basic-link"
             @click="switchLanguage(item.id)"
           />
-          <div v-else class="d-flex">
-            <div class="lang-icon">
-              <KIconButton
-                icon="language"
-                aria-hidden="true"
-                tabindex="-1"
-                class="globe px-8"
-                @click="showLanguageModal = true"
-              />
-            </div>
-            <span class="no-shrink px-8" :title="item.english_name">
-              {{ item.lang_name }}
-            </span>
-          </div>
-        </template>
-        <template #more>
-          <KButton
-            :text="$tr('showMoreLanguagesSelector')"
-            :primary="false"
-            class="px-8"
-            appearance="flat-button"
+          <SelectedLanguage
+            v-else
+            :selectedLanguage="item"
             @click="showLanguageModal = true"
           />
         </template>
+        <template #more="{ overflowItems }">
+          <div>
+            <SelectedLanguage
+              v-if="overflowItems.length === buttonLanguages.length"
+              :selectedLanguage="selectedLanguage"
+              @click="showLanguageModal = true"
+            />
+            <KButton
+              :text="$tr('showMoreLanguagesSelector')"
+              class="px-8"
+              appearance="flat-button"
+              @click="showLanguageModal = true"
+            />
+          </div>
+        </template>
       </KListWithOverflow>
     </div>
     <LanguageSwitcherModal
@@ -59,6 +56,7 @@
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
+  import SelectedLanguage from './SelectedLanguage';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
 
   const prioritizedLanguages = ['en', 'ar', 'es-419', 'hi-in', 'fr-fr', 'sw-tz'];
@@ -66,6 +64,7 @@
   export default {
     name: 'LanguageSwitcherList',
     components: {
+      SelectedLanguage,
       LanguageSwitcherModal,
     },
     mixins: [languageSwitcherMixin],
@@ -146,21 +145,11 @@
     margin-top: 8px;
   }
 
-  .no-shrink {
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
   .px-8 {
     padding-right: 8px;
     padding-left: 8px;
   }
 
-  .d-flex {
-    display: flex;
-    align-items: center;
-  }
-
   .lang-icon {
     min-width: 40px;
   }
diff --git a/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue b/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue
new file mode 100644
index 00000000000..c353f821fa1
--- /dev/null
+++ b/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue
@@ -0,0 +1,51 @@
+<template>
+
+  <div class="selected-language">
+    <KIconButton
+      icon="language"
+      aria-hidden="true"
+      tabindex="-1"
+      class="globe px-8"
+      @click="$emit('click')"
+    />
+    <span class="no-shrink px-8" :title="selectedLanguage.english_name">
+      {{ selectedLanguage.lang_name }}
+    </span>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SelectedLanguage',
+    props: {
+      selectedLanguage: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped>
+
+  .selected-language {
+    display: flex;
+    align-items: center;
+  }
+
+  .no-shrink {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  .px-8 {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+</style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 17529110761..b9869a46734 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2405,15 +2405,6 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
-  version "2.2.3"
-  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
-  dependencies:
-    asap "^2.0.3"
-    inline-style-prefixer "^4.0.2"
-    string-hash "^1.1.3"
-
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"

From dfe17e2ddb223599abbcdda58610560522249438 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 24 Apr 2024 09:03:01 -0500
Subject: [PATCH 11/11] Fix linter

---
 .../assets/src/views/language-switcher/SelectedLanguage.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue b/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue
index c353f821fa1..8befbf36c71 100644
--- a/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue
+++ b/kolibri/core/assets/src/views/language-switcher/SelectedLanguage.vue
@@ -48,4 +48,4 @@
     padding-left: 8px;
   }
 
-</style>
\ No newline at end of file
+</style>